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About the Tutorial 


Twitter Bootstrap is the most popular front end framework in the recent time. It 
is sleek, intuitive, and powerful mobile first front-end framework for faster and 
easier web development. It uses HTML, CSS and Javascript. 

This tutorial will teach you the basics of Bootstrap Framework using which you 
can create web projects with ease. The tutorial is divided into sections such as 
Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and 
Bootstrap Plugins. Each of these sections contain related topics with simple and 
useful examples. 

Audience 

This tutorial has been prepared for anyone who has a basic knowledge of HTML 
and CSS and has an urge to develop websites. After completing this tutorial you 
will find yourself at a moderate level of expertise in developing web projects 
using Twitter Bootstrap. 

Prerequisites 

Before you start proceeding with this tutorial, we are assuming that you are 
already aware about the basics of HTML and CSS. If you are not well aware of 
these concepts then we will suggest you to go through our short tutorial on 
HTML Tutorial and CSS Tutorial. 

Copyright & Disclaimer 

© Copyright 2014 by Tutorials Point (I) Pvt. Ltd. 

All the content and graphics published in this e-book are the property of 
Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, 
copy, distribute or republish any contents or a part of contents of this e-book in 
any manner without written consent of the publisher. 

We strive to update the contents of our website and tutorials as timely and as 
precisely as possible, however, the contents may contain inaccuracies or errors. 
Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, 
timeliness or completeness of our website or its contents including this tutorial. 
If you discover any errors on our website or in this tutorial, please notify us at 
contact@tutorialspoint.com 
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1. OVERVIEW 


What is Twitter Bootstrap? 

Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for 
faster and easier web development. It uses HTML, CSS, and Javascript. 

History 

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was 
released as an open source product in August 2011 on GitHub. 

Why Use Bootstrap? 

• Mobile first approach: Bootstrap 3 framework consists of Mobile first 
styles throughout the entire library instead of them in separate files. 

• Browser Support: It is supported by all popular browsers. 



<£ 0^0 


• Easy to get started: With just the knowledge of HTML and CSS anyone 
can get started with Bootstrap. Also the Bootstrap official site has a good 
documentation. 

• Responsive design: Bootstrap's responsive CSS adjusts to Desktops, 
Tablets and Mobiles. More about the responsive design is in the 
chapter Bootstrap Responsive Design. 
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Bootstrap 


• Provides a clean and uniform solution for building an interface for 
developers. 

• It contains beautiful and functional built-in components which are easy to 
customize. 

• It also provides web-based customization. 

• And best of all it is an open source. 

What Bootstrap Package Includes? 

• Scaffolding: Bootstrap provides a basic structure with Grid System, link 
styles, and background. This is covered in detail in the section Bootstrap 
Basic Structure. 

• CSS: Bootstrap comes with the feature of global CSS settings, 
fundamental HTML elements styled and enhanced with extensible classes, 
and an advanced grid system. This is covered in detail in the 
section Bootstrap with CSS. 

• Components: Bootstrap contains over a dozen reusable components built 
to provide iconography, dropdowns, navigation, alerts, pop-overs, and 
much more. This is covered in detail in the section Layout Components. 

• JavaScript Plugins: Bootstrap contains over a dozen custom jQuery 
plugins. You can easily include them all, or one by one. This is covered in 
details in the section Bootstrap Plugins. 

• Customize: You can customize Bootstrap's components, LESS variables, 
and jQuery plugins to get your very own version. 
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2. ENVIRONMENT SETUP 


It is very easy to setup and start using Bootstrap. This chapter will explain how 
to download and setup Bootstrap. We will also discuss the Bootstrap file 
structure, and demonstrate its usage with an example. 

Download Bootstrap 

You can download the latest version of Bootstrap from http://getbootstrap.com/. 
When you click on this link, you will get to see a screen as below: 


Bootstrap 

Sleek, intuitive, and powerful mobile first front-end framework 
for faster and easier web development. 

Download Bootstrap Download source 


Here you can see two buttons: 

• Download Bootstrap : Clicking this, you can download the precompiled and 
minified versions of Bootstrap CSS, JavaScript, and fonts. No 
documentation or original source code files are included. 

• Download Source : Clicking this, you can get the latest Bootstrap LESS and 
JavaScript source code directly from GitHub. 

If you work with Bootstrap's uncompiled source code, you need to compile the 
LESS files to produce usable CSS files. For compiling LESS files into CSS, 
Bootstrap officially supports only Recess, which is Twitter's CSS hinter based 
on less.js. 

For better understanding and ease of use, we shall use precompiled version of 
Bootstrap throughout the tutorial. As the files are complied and minified, you 
don't have to bother every time including separate files for individual 
functionality. At the time of writing this tutorial the latest version (Bootstrap 3) 
was downloaded. 
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Bootstrap 


File structure 


Precompiled Bootstrap 

Once the compiled version Bootstrap is downloaded, extract the ZIP file, and you 
will see the following file/directory structure: 


bootstrap/ 

I — css/ 

— bootstrap. css 

— bootstrap. ntn. css 

— bootstrap -theme. css 

— bootstrap -theme. min. css 


L 


? s/ 

— bootstrap. ]s 

' — bootstrap. min. js 
fonts/ 

— giyphlcons-haifiings- regular .eot 

— glyphleons-halfltngs - regular . svg 

— glyphicons- half lings- regular. ttf 
*— glyphicons • half lings ■ regular . wof f 


As you can see, there are compiled CSS and JS (bootstrap.*), as well as 
compiled and minified CSS and JS (bootstrap. min.*). Fonts from Glyphicons are 
included, as it is the optional Bootstrap theme. 


Bootstrap Source Code 

If you have downloaded the Bootstrap source code then the file structure would 
be as follows: 


less/ 

js/ 

fonts/ 

dist/ 

I CSS/ 

r js/ 

1 — fonts/ 
docs-assets/ 
examples/ 
*.html 


• The files under less/, js/, and fonts/ are the source code for Bootstrap 
CSS, JS, and icon fonts (respectively). 

• The dist / folder includes everything listed in the precompiled download 
section above. 

• docs-assets/ , examples/, and all *.html files are Bootstrap documentation. 

HTML Template 

A basic HTML template using Bootstrap would look like this: 
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< ! DOCTYPE html> 

<html> 

<head> 

<title>Bootstnap 101 Template</title> 

<meta name="viewpont" content="width=device-widthj initial- 
scale=1.0"> 

<!-- Bootstrap --> 

<link href="css/bootstrap.min.css" rel="stylesheet"> 

<!-- HTML5 Shim and Respond. js IE8 support of HTML5 elements and 
media queries --> 

<!-- WARNING: Respond. js doesn't work if you view the page 
via file:// --> 

< ! - - [if It IE 9 ] > 

< script src=" https : //oss .maxcdn . com/libs/html5shiv/3 . 7.0/ 
html5shiv . js"x/script> 

< script src=" https : //oss .maxcdn . com/ libs /res pond . js/1 . 3.0/ 
respond, min. js"x/script> 

< ! [endif] --> 

</head> 

<body> 

<hl>Hello J world! </hl> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 

< script src=" https : //code . j query . com/ j query . js" x/script> 

<!-- Include all compiled plugins (below ) , or include individual 
files as needed --> 

< script src=" js/ boot strap .min . js" x/script> 

</body> 

</html> 

Here you can see the jquery.js, bootstrap. min.js and bootstrap. min. css files 
that are included to make a normal HTM file to the Bootstrapped Template. Just 
make sure to include jQuery library before you include Bootstrap library. 

More details about each of the elements in this above piece of code will be 
discussed in the chapter Bootstrap CSS Overview. 
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This template structure is already included as part of the Try it (online 
compiler) tool. Hence in all the examples (in the following chapters) of this 
tutorial you will only see the contents of the <body> element. Once you click on 
the Try it option available at the top right corner of example, and you will see 
the entire code. 

Example 

Now let's try an example using the above template. Try the following example 
using Try it option available at the top right corner of the below sample code box 
on our website: 


<hl>Hello, world! </hl> 


In all the subsequent chapters we have used dummy text from the site 
http://www.lipsum.com/. 
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3. GRID SYSTEM 


In this chapter, we shall discuss the Bootstrap Grid System. 

What is a Grid? 

As put by wikepedia: 

In graphic design, a grid is a structure (usually two-dimensional) made up of a 
series of intersecting straight (vertical, horizontal) lines used to structure the 
content. It is widely used to design layout and content structure in print design. 
In web design, it is a very effective method to create a consistent layout rapidly 
and effectively using HTML and CSS. 

To put in simple words, grids in web design organise and structure content, 
makes the websites easy to scan and reduces the cognitive load on users. 

What is Bootstrap Grid System? 

As put by the official documentation of Bootstrap for grid system: 

Bootstrap includes a responsive, mobile first fluid grid system that appropriately 
scales up to 12 columns as the device or viewport size increases. It includes 
predefined classes for easy layout options, as well as powerful mixins for 
generating more semantic layouts. 

Let us understand the above statement. Bootstrap 3 is mobile first in the sense 
that the code for Bootstrap now starts by targeting smaller screens like mobile 
devices, tablets, and then "expands" components and grids for larger screens 
such as laptops, desktops. 

Mobile First Strategy 

• Content 

o Determine what is most important. 

• Layout 

o Design to smaller widths first. 

o Base CSS address mobile device first; media queries address for 
tablet, desktops. 

• Progressive Enhancement 

o Add elements as screen size increases. 
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Working of Bootstrap Grid System 

Grid systems are used for creating page layouts through a series of rows and 
columns that house your content. Here's how the Bootstrap grid system works: 

• Rows must be placed within a .container class for proper alignment and 
padding. 

• Use rows to create horizontal groups of columns. 

• Content should be placed within the columns, and only columns may be 
the immediate children of rows. 

• Predefined grid classes like .row and .col-xs-4 are available for quickly 
making grid layouts. LESS mixins can also be used for more semantic 
layouts. 

• Columns create gutters (gaps between column content) via padding. That 
padding is offset in rows for the first and the last column via negative 
margin on .rows. 

• Grid columns are created by specifying the number of twelve available 
columns you wish to span. For example, three equal columns would use 
three .col-xs-4. 

Media Queries 

Media query is a really fancy term for "conditional CSS rule". It simply applies 
some CSS, based on certain conditions set forth. If those conditions are met, the 
style is applied. 

Media Queries in Bootstrap allow you to move, show and hide content based on 
the viewport size. Following media queries are used in LESS files to create the 
key breakpoints in the Bootstrap grid system. 


/* Extra small devices (phones, less than 768px) */ 

/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 

@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 

@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
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@media (min-width: @screen-lg-min) { ... } 


Occasionally these are expanded to include a max-width to limit CSS to a 
narrower set of devices. 


@media (max-width: @screen-xs-max) { ... } 

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } 
@media (min-width: @screen-lg-min) { ... } 


Media queries have two parts, a device specification and then a size rule. In the 
above case, the following rule is set: 

Let us consider this line: 


@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } 


For all devices no matter what kind with min-width: @screen-sm-min, if the 
width of the screen gets smaller than @screen-sm-max, then do something. 


Grid Options 

The following table summarizes aspects of how Bootstrap grid system works 
across multiple devices: 



Extra small 
devices 
Phones 
(<768px) 

Small devices 
Tablets 
(>768px) 

Medium 

devices 

Desktops 

(>992px) 

Large devices 
Desktops 
(>1200px) 

Grid 

behavior 

Horizontal at 
all times 

Collapsed to 

start, 

horizontal 

above 

breakpoints 

Collapsed to 

start, 

horizontal 

above 

breakpoints 

Collapsed to 

start, 

horizontal 

above 

breakpoints 

Max 

container 

width 

None (auto) 

750px 

970px 

1170px 

Class 

prefix 

.col-xs- 

.col-sm- 

.col-md- 

.col-lg- 
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# of 
columns 

12 

12 

12 

12 

Max 

column 

width 

Auto 

60px 

78px 

95px 

Gutter 

width 

30px 
(15px on 
each side of a 
column) 

30px 

(15px on each 
side of a 
column) 

30px 

(15px on each 
side of a 
column) 

30px 

(15px on each 
side of a 
column) 

Nestable 

Yes 

Yes 

Yes 

Yes 

Offsets 

Yes 

Yes 

Yes 

Yes 

Column 

ordering 

Yes 

Yes 

Yes 

Yes 


Basic Grid Structure 

Following is basic structure of Bootstrap grid: 

<div class="container"> 

<div class="row"> 

<div class = "col-*-*"x/div> 

<div class = "col-*-*"x/div> 

</div> 

<div class="row" > . . . </div> 

</div> 

<div class = "container"> . . . . 

Let us see some simple grid examples: 

Example: Stacked-to-horizontal 

Let us see a simple grid example with simple layout: two columns, two 
paragraphs per column. (Here styling for each column is used. You can avoid it.) 

<div class="container"> 
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<hl>Hello, world ! </hl> 

<div class="row"> 

<div class="col-md-6" style="background-color : #dedef8; box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 

</p> 

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
quae ab illo inventore veritatis et quasi architecto beatae 
vitae dicta sunt explicabo. 

</p> 

</div> 

<div class="col-md-6" style="background-color : #dedef8; box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium. 

</p> 

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit 
amet, consectetur, adipisci velit, sed quia non numquam eius 
modi tempora incidunt ut labore et dolore magnam aliquam quaerat 
voluptatem. 

</p> 

</div> 

</div> 
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Hello, world! 



Details 

• <div class="container">...</div> element is added to ensure proper 
centering and maximum width for layout. 

• Once container is added, next you need to think in terms of rows. 

Add <div class="row">...</div> and columns <div class="col-md- 
6"></div> inside the rows. 

• Every row in the grid is made up of 12 units and you can define the 
desired size of your columns using those units. In our example we have 
two columns each made of 6 units wide i.e 6+6=12. 

You can try some more options like: 

<div class="col-md-3"></div> and <div class="col-md-9"></div> 
or <div class="col-md-7"x/div> and <div class="col-md-5"></div>. 
Experiment and make sure that the sum always needs to be 12. 

Example: Medium and Large Device 

We have seen the basic grid system in ‘Example: Stacked-to-horizontal'. Here 
we have used 2 divs and gave them the 50%/50% split at the medium viewport 
width: 


<div 

class="col-md-6">. . 

. . </div> 

<div 

class = "col-md-6">. . 

. . </div> 


But at large, your design could really be better as a 33%/66%. So what we're 
going to do is, set it up to change the column widths at the breakpoint: 


<div class="col-md-6 col-lg-4">. . . .</div> 
<div class="col-md-6 col-lg-4">. . . .</div> 


Now Bootstrap is going to say "at the medium size, I look at classes with md in 
them and use those. At the large size, I look at classes with the word Ig in them 
and use those. In this case, our 2 divs will go from a 50%/50% split and then up 
to a 33%/66%. Check it out in the following example. (Here styling for each 
column is used. You can avoid it.) 


<div class="container"> 
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<hl>Hello, world ! </hl> 

<div class="row"> 

<div class="col-md-6 col-lg-4" style="background-color : #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 

</p> 

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
quae ab illo inventore veritatis et quasi architecto beatae 
vitae dicta sunt explicabo. 

</p> 

</div> 

<div class="col-md-6 col-lg-8"" style="background-color : #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium. 

</p> 

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit 
amet, consectetur, adipisci velit, sed quia non numquam eius 
modi tempora incidunt ut labore et dolore magnam aliquam quaerat 
voluptatem. 

</p> 

</div> 

</div> 
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Hello, world! 
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Example: Mobile, tablet, desktops 

We have seen an example for Medium and Large Device. Now let us take it to 
another level, where we would want to change it for the extra small phone size 
as well. Say we want to add the option for the columns to be split 75%/25% for 
tablets, we go like this: 

<div class="col-sm-3 col-md-6 col-lg-4">. . . .</div> 

<div class="col-sm-9 col-md-6 col-lg-8">. . . .</div> 

Now this gives us 3 different column layouts at each point. On a phone, it will be 
75% on the left, and 25% on the right. On a tablet, it will be 50%/50% again, 
and on a large viewport, it will be 33%/66%. Three different layouts for each of 
the three responsive sizes. Check it out in the following example. (Here styling 
for each column is used. You can avoid it.) 

<div class="container"> 

<hl>Hello, world! </hl> 

<div class="row"> 

<div class="col-sm-3 col-md-6 col-lg-8" 
style=" background -color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, 
inset -lpx lpx lpx #444; "> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 

</p> 

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
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quae ab illo inventore veritatis et quasi architecto beatae 
vitae dicta sunt explicabo. 

</p> 

</div> 

<div class="col-sm-9 col-md-6 col-lg-4" 
style=" background -colon: #dedef8; 
box-shadow: inset lpx -lpx lpx #444^ 
inset -lpx lpx lpx #444; "> 

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium. 

</p> 

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit 
amet, consectetur, adipisci velit, sed quia non numquam eius 
modi tempora incidunt ut labore et dolore magnam aliquam quaerat 
voluptatem. 

</p> 

</div> 

</div> 


Hello 

world! 
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Responsive Column Resets 

With the four tiers of grids available, you are bound to run into issues where at 
certain breakpoints, the columns don't clear quite right as one is taller than the 
other. To fix that, use a combination of a class .clearfix and the responsive 
utility classes as shown in the following example: 


<div class="container"> 

<div class="row" > 

<div class="col-xs-6 col-sm-3" 
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style=" background -colon: #dedef8; 

box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 

elit . </p> 

</div> 

<div class="col-xs-6 col-sm-3" 

style="background-color : #dedef8; box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 

</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut. 

</p> 

</div> 

<div class="clearfix visible-xs" ></div> 

<div class="col-xs-6 col-sm-3" 

style=" background -color: #dedef8; 

box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. 

</p> 

</div> 

<div class="col-xs-6 col-sm-3" 

sty le=" background -color: #dedef8; box- shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim 
</p> 
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</div> 

</div> 

</div> 


Resize your viewport or check it out on your phone for a desired result of this 
example. 

Offset Columns 

Offsets are a useful feature for more specialized layouts. They can be used to 
push columns over for more spacing (for example). The .col-xs=* classes don't 
support offsets, but they are easily replicated by using an empty cell. 

To use offsets on large displays, use the .col-md-offset-* classes. These 
classes increase the left margin of a column by * columns where * range 
from 1 to 11 . 


In the following example, we have <div class="col-md-6">..</div>. We will 
center this using class .col-md-offset-3. 
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Nesting Columns 

To nest your content with the default grid, add a new .row and set of .col-md- 
* columns within an existing .col-md-* column. Nested rows should include a 
set of columns that add up to 12. 

In the following example, the layout has two columns, with the second one being 
split into four boxes over two rows. 

<div class="container"> 

<hl>Hello, world!</hl> 

<div class="row"> 

<div class="col-md-3" style="background-color : #dedef8; box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 

<h4>First Column</h4> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
</div> 

<div class="col-md-9" style="background-color : #dedef8; box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 

<h4>Second Column- Split into 4 boxes</h4> 

<div class="row"> 

<div class="col-md-6" style="background-color : #B18904; 

box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx 444; "> 
<p>Consectetur art party Tonx culpa semiotics. Pinterest 
assumenda minim organic quis. 

</p> 

</div> 

<div class="col-md-6" style="background-color : #B18904; 

box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx 444; "> 
<p> sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. 

</p> 
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</div> 

</div> 

<div class="row"> 

<div class="col-md-6" style="backgnound-colon: #B18904; 

box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx 444; "> 
<p>quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 

</p> 

</div> 

<div class="col-md-6" style="backgnound-colon: #B18904; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim. </p> 

</div> 

</div> 

</div> 

</div> 

</div> 

Hello, world! 

First Column 

Larcm psum defcu U amet. coroecaetur 

KlpICl)) *il 



Column Ordering 

Another nice feature of Bootstrap grid system is that you can easily write the 
columns in an order, and show them in another one. You can easily change the 
order of built-in grid columns with .col-md-push-* and .col-md-pull-* modifier 
classes where * range from 1 toll. 

In the following example we have two columns layout with left column being the 
narrowest and acting as a sidebar. We will swap the order of these columns 
using .col-md-push-* and. col-md-pull-* classes. 
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<div class="container"> 

<hl>Hello J world! </hl> 

<div class="row"> 

<p>Before Ordering</p> 

<div class="col-md-4" style="background-color : #dedef8; 

box-shadow: inset lpx -lpx lpx #444., inset -lpx lpx lpx #444; "> 
I am on left 
</div> 

<div class="col-md-8" style="background-color : #dedef8; 

box-shadow: inset lpx -lpx lpx #444^ inset -lpx lpx lpx #444; "> 
I am on right 
</div> 

</divxbr> 

<div class="row"> 

<p>After Ordering</p> 

<div class="col-md-4 col-md-push-8" 
style=" background -color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444j 
inset -lpx lpx lpx #444; "> 

I was on left 
</div> 

<div class="col-md-8 col-md-pull-4" 
style=" background -color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444j 
inset -lpx lpx lpx #444; "> 

I was on right 
</div> 

</div> 

</div> 
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Hello, world! 

Before Oroemg 

I 1— wMl I I— omit 

Alter CViterng 



21 


4. CSS OVERVIEW 


This chapter provides an overview of the key pieces of Bootstrap's infrastructure, 
including Bootstrap's approach to better, faster, stronger web development. 

HTML5doctype 

Bootstrap makes use of certain HTML elements and CSS properties that require 
the use of the HTML5 doctype. Hence, include the below piece of code for HTML5 
doctype at the beginning of all your projects using Bootstrap. 

<! DOCTYPE html> 

<html> 

</html> 


Mobile First 

Since Bootstrap 3 has been launched, Bootstrap has become 'mobile first'. It 
means mobile first styles can be found throughout the entire library instead of 
them in separate files. You need to add the viewport meta tag to 
the <head> element, to ensure proper rendering and touch zooming on mobile 
devices. 


<meta name="viewport" content="width=device-widthj initial-scale=1.0"> 


• width property controls the width of the device. Setting it to device- 
width will make sure that it is rendered across various devices (mobiles, 
desktops, tablets...) properly. 

• initial-scale-1.0 ensures that when loaded, your web page will be 
rendered at a 1:1 scale, and no zooming will be applied out of the box. 

Add user-scalable=no to the content attribute, to disable zooming capabilities 
on mobile devices as shown below. Users are only able to scroll and not zoom 
with this change, and results in your site feeling a bit more like a native 
application. 


<meta name="viewport" content="width=device-widthj 

initial- sea le=1.0, 
maximum -scale=1.0. 
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user-scalable=no" > 


Normally maximum-scale-1.0 is used along with user-scalable-no. As 
mentioned above user-scalable=no may give users an experience more like a 
native app, hence Bootstrap doesn't recommend using this attribute. 

Responsive Images 

Bootstrap 3 allows you to make the images responsive by adding a class .img- 
responsive to the <img>tag. This class applies max-width: 
100%; and height: auto; to the image so that it scales nicely to the parent 
element. 


<img src="..." class="img-responsive" alt="Responsive image"> 


Typography and Links 

Bootstrap sets a basic global display (background), typography, and link styles: 

• Basic Global display: Sets background-color: #fff; on the <body> 
element. 

• Typography: Uses the @font-family-base, @font-size-base, and @line- 
height-base attributes as the typographic base. 

• Link styles: Sets the global link color via attribute @link-color and apply 
link underlines only on:hover. 

If you intend to use LESS code, you may find all these within scaffolding. less. 

Normalize 

Bootstrap uses Normalize to establish cross browser consistency. 

Normalize. css is a modern, HTML5-ready alternative to CSS resets. It is a small 
CSS file that provides better cross-browser consistency in the default styling of 
HTML elements. 

Containers 

Use class .container to wrap a page's content and easily center the content's as 
shown below. 


<div class="container"> 

</div> 
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Take a look at the .container class in bootstrap. css file: 

.container { 

padding- right : 15px; 
padding-left: 15px; 
margin-right : auto; 
margin-left: auto; 

} 

Note that, due to padding and fixed widths, containers are not nestable by 
default. 

Take a look at bootstrap. css file: 

@media (min-width: 768px) { 

.container { 
width: 750px; 

} 

} 

Here you can see that CSS has media-queries for containers with width. This 
helps for applying responsiveness and within those the container class is 
modified accordingly to render the grid system properly. 
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5. TYPOGRAPHY 


Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font 
stack. Using typography feature of Bootstrap you can create headings, 
paragraphs, lists and other inline elements. Let see learn each one of these in 
the following sections. 

Headings 

All HTML headings (hi to h6) are styled in Bootstrap. An example is shown 
below: 


<hl>I'm Headingl hl</hl> 

<h2>I'm Heading2 h2</h2> 

<h3>I'm Heading3 h3</h3> 

<h4>I'm Heading4 h4</h4> 

<h5>I'm Heading5 h5</h5> 

<h6>I'm Heading6 h6</h6> 

The above code segment with Bootstrap will produce following result: 


I'm Headingl hi 

I'm Heading2 h2 

I'm Heading3 h3 

I'm Heading4 h4 

I'm Heading5 h5 
I'm Heading6 h6 


Inline Subheadings 

To add an inline subheading to any of the headings, simply add <small> around 
any of the elements or add .small class and you will get smaller text in a lighter 
color as shown in the example below: 

<hl>I'm Headingl hi. <small>I'm secondary Headingl hl</smallx/hl> 

<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</smallx/h2> 
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<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</smallx/h3> 
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</smallx/h4> 
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</smallx/h5> 
<h6>I'm Heading6 h6. <small>I'm secondary Headingl h6</smallx/h6> 


The above code segment with Bootstrap will produce the following result: 


I'm Headingl hi. msec 


I'm Heading2 h2. n secondary 

Heading2 h2 

I'm Heading3 h3. 


I'm Heading4 h4. rex, x x 


I’m Heading5 h5. 


I'm Headmg6 h6. 



Lead Body Copy 

To add some emphasis to a paragraph, add class="lead". This will give you a 
larger font size, lighter weight, and a taller line height as in the following 
example: 


<h2>Lead Example</h2> 

<p class="lead" >This is an example paragraph demonstrating the use of 
lead body copy. This is an example paragraph demonstrating the use of 
lead body copy. This is an example paragraph demonstrating the use of 

lead body copy. This is an example paragraph demonstrating the use of 

lead body copy. This is an example paragraph demonstrating the use of 

lead body copy.</p> 


Lead Example 

This is an example paragraph demonstrating the use of lead body copy. This is an example 
paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating 
the use of lead body copy.This is an example paragraph demonstrating the use of lead body 
copy.This is an example paragraph demonstrating the use of lead body copy. 
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Emphasis 

HTML's default emphasis tags such as <small>, sets text at 85% the size of the 
parent, <strong> emphasizes a text with heavier font-weight, and <em> 
emphasizes a text in italics. 

Bootstrap offers a few classes that can be used to provide emphasis on texts as 
seen in the following example: 

<small>This content is within <small> tag</smallxbr> 

<strong>This content is within <strong> tag</strongxbr> 

<em>This content is within <em> tag and is rendered as italics</emxbr> 

<p class="text-left" >Left aligned text.</p> 

<p class="text-center">Center aligned text.</p> 

<p class="text-right">Right aligned text.</p> 

<p class="text-muted" >This content is muted</p> 

<p class="text-primary" >This content carries a primary class</p> 

<p class="text-success" >This content carries a success class</p> 

<p class="text-info" >This content carries a info class</p> 

<p class="text-warning" >This content carries a warning class</p> 

<p class="text-danger">This content carries a danger class</p> 


This content is within <small> tag 

This content is within <strong> tag 

This content is within <em> tag and is rendered as itahcs 

Left aligned text 


Center aligned text. 

Right aligned text 

This content carries a warning class 


This content carries a success class 


This content carries a info class 


This content carries a danger class 



Abbreviations 

The HTML element provides markup for abbreviations or acronyms, like WWW or 
HTTP. Bootstrap styles <abbr> elements with a light dotted border along the 
bottom and reveals the full text on hover (as long as you add that text to the 

27 



Bootstrap 


<abbr> title attribute). To get a slightly smaller font size add . initiallsm to 
<abbr>. 


<abbr title="World Wide Web" >WWW</abbrxbr> 

<abbr title="Real Simple Syndication" class="initialism" >RSS</abbr> 


WWW 

RSS 


Addresses 

Using <address> tag you can display the contact information on your web page. 
Since the <address> defaults to display: block; you'll need to use 
tags to add line breaks to the enclosed address text. 

<address> 

<strong>Some Company; Inc . </strongxbr> 

007 street<br> 

Some City; State XXXXX<br> 

<abbr title="Phone" >P : </abbr> (123) 456-7890 
</address> 

<address> 

<strong>Full Name</strongxbr> 

<a href="mailto:#" >mailto@somedomain . com</a> 

</address> 


Some Company, Inc. 

007 street 

Some City. State xxxxx 
P: (123) 456-7890 

Full Name 


Blockquotes 

You can use the default <blockquote> around any HTML text. Other options 
include, adding a <small> tag for identifying the source of the quote and right- 
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aligning the blockquote using class .pull-right. The following example 
demonstrates all these features: 

<blockquote> 

<P> 

This is a default blockquote example. This is a default blockquote 
example. This is a default blockquote example. This is a default 
blockquote example. This is a default blockquote 
example . 

</p> 

</blockquote> 

<blockquote> 

This is a blockquote with a source title. 

<small> 

Someone famous in 

<cite title="Source Title">Source Title</cite> 

</small> 

</blockquote> 

< blockquote c la s s=" pull- right "> 

This is a blockquote aligned to the right. 

<small> 

Someone famous in 

<cite title="Source Title">Source Title</cite> 

</small> 

</blockquote> 
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Example of Blockquote 

This is a default blockquote example. This is a default blockquote example. This is a default 
blockquote example. This is a default blockquote example. This is a default blockquote 
example. 

This is a blockquote with a source title 


The is a blockquote aligned to the nght 


Lists 

Bootstrap supports ordered lists, unordered lists, and definition lists. 

• Ordered lists: An ordered list is a list that falls in some sort of sequential 
order and is prefaced by numbers. 

• Unordered lists: An unordered list is a list that doesn't have any 
particular order and is traditionally styled with bullets. If you do not want 
the bullets to appear, then you can remove the styling by using the 
class .list-unstyled. You can also place all list items on a single line using 
the class .list-inline. 

• Definition lists: In this type of list, each list item can consist of both the 
<dt> and the <dd> elements. <dt> stands for definition term, and like a 
dictionary, this is the term (or phrase) that is being defined. 
Subsequently, the <dd> is the definition of the <dt>. 

You can make terms and descriptions in <dl> line up side-by-side using 
class dl-horizontal. 

The following example demonstrates each of these types: 


<h4>Example of Ordered List</h4> 
<ol> 

<li>Item l</li> 

<li>Item 2</li> 

<li>Item 3</li> 

<li>Item 4</li> 

< / ol> 

<h4>Example of UnOrdered List</h4> 
<ul> 

<li>Item l</li> 
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<li>Item 2</li> 

<li>Item 3</li> 

<li>Item 4</li> 

</ul> 

<h4>Example of Unstyled List</h4> 

<ul class="list-unstyled" > 

<li>Item l</li> 

<li>Item 2</li> 

<li>Item 3</li> 

<li>Item 4</li> 

</ul> 

<h4>Example of Inline List</h4> 

<ul class="list-inline" > 

<li>Item l</li> 

<li>Item 2</li> 

<li>Item 3</li> 

<li>Item 4</li> 

</ul> 

<h4>Example of Definition List</h4> 

<dl> 

<dt>Descniption l</dt> 

<dd>Item l</dd> 

<dt>Descniption 2</dt> 

<dd>Item 2</dd> 

</dl> 

<h4>Example of Horizontal Definition List</h4> 
<dl class="dl-horizontal" > 

<dt>Description l</dt> 

<dd>Item l</dd> 

<dt>Description 2</dt> 

<dd>Item 2</dd> 

</dl> 
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Example of Ordered List 

1. Item 1 

2. Item 2 

3. Item 3 

4. Item 4 

Example of UnOrdered List 

• Item 1 

• Item 2 

• Item 3 

• Item 4 

Example of Unstyled List 

Item l 
Item 2 
Item 3 
Item 4 

Example of Inline List 

Item 1 Item 2 Item 3 Item 4 

Example of Definition List 

Description 1 

Item 1 

Description 2 

Item 2 

Example of Horizontal Definition List 

Description 1 Item 1 
Description 2 Item 2 
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Bootstrap allows you to display code with two different key ways: 

• The first is the <code> tag. If you are going to be displaying code inline, 
you should use the <code> tag. 

• Second is the <pre> tag. If the code needs to be displayed as a 
standalone block element or if it has multiple lines, then you should use 
the <pre> tag. 

Make sure that when you use the <pre> and <code> tags, you use the Unicode 
variants for the opening and closing tags: &lt; and &gt; . 

Let us see an example below: 

<pxcode>&lt; header&gt; </code> is wrapped as an inline element. </p> 

<p>To display code as a standalone block element use &lt;pre&gt; tag as: 
<pre> 

&lt; article&gt; 

&lt; hl&gt; Article Heading&lt; /hl&gt; 

&lt; /article&gt ; 

</pre> 

<header> Is wrapped as an inline element. 

To display code as a standalone block element use <pre> tag as: 

<artlcle> 

<hl>Artlcle Headlng</hl> 

</article> 
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Bootstrap provides a clean layout for building tables. Some of the table elements 
supported by Bootstrap are: 


Tag 

Description 

<table> 

Wrapping element for displaying data in a tabular format. 

<thead> 

Container element for table header rows (<tr>) to label table 
columns. 

<tbody> 

Container element for table rows (<tr>) in the body of the table. 

<tr> 

Container element for a set of table cells (<td> or <th>) that 
appears on a single row. 

<td> 

Default table cell. 

<th> 

Special table cell for column (or row, depending on scope and 
placement) labels. Must be used within a <thead>. 

<caption> 

Description or summary of what the table holds. 


Basic Table 

If you want a nice, basic table style with just some light padding and horizontal 
dividers, add the base class of. table to any table as shown in the following 
example: 

<table class="table" > 

<caption>Basic Table Layout</caption> 

<thead> 

<tr> 

<th>Name</th> 

<th>City</th> 

</tr> 
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</thead> 

<tbody> 

<tn> 

<td>Tanmay</td> 

<td>Bangalore</td> 

</tr> 

<tn> 

<td>Sachin</td> 

<td>Mumbai</td> 

</tr> 

</tbody> 

</table> 

Basic Table Layout 
City 

Bangalore 
Mumbai 


Name 

Tanmay 

Sachin 


Optional Table Classes 

Along with the base table markup and the .table class, there are a few additional 
classes that you can use to style the markup. Following sections will give you a 
glimpse of all these classes. 

Striped Table 

By adding the .table-striped class, you will get stripes on rows within the 
<tbody> as seen in the following example: 


<table class="table table-striped" > 

<caption>Striped Table Layout</caption> 
<thead> 

<tr> 

<th>Name</th> 

<th>City</th> 

<th>Pincode</th> 
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</tr> 

</thead> 

<tbody> 

<tn> 

<td>Tanmay</td> 
<td>Bangalone</td> 
<td> 560001 </td> 
</tr> 

<tn> 

<td>Sachin</td> 

<td>Mumbai</td> 

<td >400003 </td> 
</tr> 

<tn> 

<td>Uma</td> 

<td>Pune</td> 

<td>411027</td> 

</tr> 

</tbody> 

</table> 


Pincode 

560001 

400003 

411027 


Striped Table Layout 


Name 

City 

Tanmay 

Bangalore 

Sachin 

Mumbai 

Uma 

Pune 


Bordered Table 

By adding the .table-bordered class, you will get borders surrounding every 
element and rounded corners around the entire table as seen in the following 
example: 

<table class="table table-bordered" > 

<caption>Bordered Table Layout</caption> 

<thead> 
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Hover Table 

By adding the .table-hover class, a light gray background will be added to rows 
while the cursor hovers over them, as seen in the following example: 


<table class="table table-hover"> 

<caption>Hover Table Layout</caption> 
<thead> 

<tr> 

<th>Name</th> 

<th>City</th> 

<th>Pincode</th> 

</tr> 

</thead> 

<tbody> 

<tr> 

<td>Tanmay</td> 

<td>Bangalore</td> 

<td> 560001 </td> 

</tr> 

<tr> 

<td>Sachin</td> 

<td>Mumbai</td> 

<td>400003</td> 

</tr> 

<tr> 

<td>Uma</td> 

<td>Pune</td> 

<td>411027</td> 

</tr> 

</tbody> 

</table> 
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Hover Table Layout 


Name 

City 

Pincode 

Tanmay 

Bangalore 

560001 

Sachin 

Mumbai 

400003 

lima 

Pune 

411027 


Condensed Table 

By adding the .table-condensed class, row padding is cut in half to condense the 
table as seen in the following example. This is useful if you want any denser 
information. 

ctable class="table table-condensed"> 

<caption>Condensed Table Layout</caption> 

<thead> 

<tr> 

<th>Name</th> 

<th>City</th> 

<th>Pincode</th> 

</tr> 

</thead> 

<tbody> 

<tr> 

<td>Tanmay</td> 

<td>Bangalore</td> 

<td> 560001 </td> 

</tr> 

<tr> 

<td>Sachin</td> 

<td>Mumbai</td> 

<td>400003</td> 

</tr> 

<tr> 

<td>Uma</td> 

<td>Pune</td> 

<td>411027</td> 
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</tr> 

</tbody> 

</table> 



Condensed Table Layout 


Name 

City 

Pincode 

Tanmay 

Bangalore 

560001 

Sachin 

Mumbai 

400003 

Uma 

Pune 

411027 


Contextual classes 


The Contextual classes shown in following table will allow you to change the 
background color of your table rows or individual cells. 


Class 

Description 

.active 

Applies the hover color to a particular row or cell. 

.success 

Indicates a successful or positive action. 

.warning 

Indicates a warning that might need attention. 

.danger 

Indicates a dangerous or potentially negative action. 


These classes can be applied to <tr>, <td> or <th>. 

ctable class="table" > 

<caption>Contextual Table Layout</caption> 
<thead> 

<tr> 

<th>Product</th> 

<th>Payment Date</th> 

<th>Status</th> 

</tr> 

</thead> 

<tbody> 
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<tr class="active"> 
<td>Pnoductl</td> 

<td >23/11/2013 </td> 
<td>Pending</td> 

</tr> 

<tr class="success" > 
<td>Product2</td> 

<td >10/11/2013 </td> 
<td>Delivened</td> 

</tr> 

<tn class="warning" > 
<td>Pnoduct3</td> 

<td> 20/10/2013 </td> 

<td>In Call to confirm</td> 
</tr> 

<tn class="danger" > 
<td>Pnoduct4</td> 

<td> 20/10/2013 </td> 

<td>Dec lined </td> 

</tr> 

</tbody> 

</table> 


Contextual Table Layout 


Product 

Payment Date 

Status 

Product 1 

23/1 1/2013 

Pending 

Product2 

10/1 1/2013 

Delivered 

Product3 

20/10/2013 

In Call to confirm 

Product4 

20/10/2013 

Declined 


Responsive tables 

By wrapping any .table in .table-responsive class, you will make the table scroll 
horizontally up to small devices (under 768px). When viewing on anything larger 
than 768px wide, you will not see any difference in these tables. 
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<div class="table-responsive"> 

<table class="table" > 

<caption>Responsive Table Layout</caption> 
<thead> 

<tn> 

<th>Pnoduct</th> 

<th>Payment Date</th> 

<th>Status</th> 

</tr> 

</thead> 

<tbody> 

<tn> 

<td>Productl</td> 

<td >23/ 11/2013 </td> 

<td>Pending</td> 

</tr> 

<tn> 

<td>Product2</td> 

<td >10/ 11/2013 </td> 
<td>Delivered</td> 

</tr> 

<tn> 

< td > Product 3 </td> 

<td >20/ 10/2013 </td> 

<td>In Call to confirm</td> 

</tr> 

<tr> 

<td>Product4</td> 

<td >20/ 10/2013 </td> 

<td>Declined</td> 

</tr> 

</tbody> 

</table> 
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</div> 


Responsive Table Layout 


Product 

Payment Date 

Status 

Product 1 

23/11/2013 

Pending 

Product2 

10/11/2013 

Delivered 

Produd3 

20/10/2013 

In Call to confirm 

Product4 

20/10/2013 

Declined 
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In this chapter, we will study how to create forms with ease using Bootstrap. 
Bootstrap makes it easy with the simple HTML markup and extended classes for 
different styles of forms. In this chapter we will study how to create forms with 
ease using Bootstrap. 

Form Layout 

Bootstrap provides you with following types of form layouts: 

• Vertical (default) form 

• Inline form 

• Horizontal form 

Vertical or Basic Form 

The basic form structure comes with Bootstrap; individual form controls 
automatically receive some global styling. To create a basic form do the 
following: 

• Add a role form to the parent <form> element. 

• Wrap labels and controls in a <div> with class .form-group. This is needed 
for optimum spacing. 

• Add a class of .form -control to all textual <input>, <textarea>, and 
<select> elements. 


<form role="form"> 

<div class="form-group"> 

<label for="name" >Name</label> 

<input type="text" class="form-control" id="name" 
placeholder="Enter Name"> 

</div> 

<div class="form-group"> 

<label for="inputf ile" >File input</label> 

<input type="file" id="inputfile"> 

<p class="help-block">Example block-level help text here.</p> 
</div> 
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<div class="checkbox"> 

<label> 

<input type="checkbox" > Check me out 
</label> 

</div> 

<button type="submit" class="btn btn-default">Submit</button> 
</form> 

Name 

File input 

Browse... No file selected. 

Example block-level help text here. 

□ Check me out 
Submit 


Inline Form 

To create a form where all of the elements are inline, left aligned and labels are 
alongside, add the class .form-inline to the <form> tag. 

<form class="form-inline" role="form"> 

<div class="form-group"> 

<label class="sr-only" for="name">Name</label> 

<input type="text" class="form-control" id="name" 
placeholder="Enter Name"> 

</div> 

<div class="form-group"> 

<label class="sr-only" for="inputf ile" >File input</label> 

<input type="file" id="inputf ile" > 

</div> 

<div class="checkbox" > 

<label> 

<input type="checkbox" > Check me out 
</label> 
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</div> 

cbutton type="submit" class="btn btn-default" >Submit</button> 
</fonm> 


[ Browse... No file selected. Check me out Submit 


• By default inputs, selects, and textareas have 100% width in Bootstrap. 
You need to set a width on the form controls when using inline form. 

• Using the class .sr-only you can hide the labels of the inline forms. 

Horizontal Form 

Horizontal forms stands apart from the others not only in the amount of markup, 
but also in the presentation of the form. To create a form that uses the 
horizontal layout, do the following: 

• Add a class of .form-horizontal to the parent <form> element. 

• Wrap labels and controls in a <div> with class .form-group. 

• Add a class of .control-label to the labels. 

<form class="form-horizontal" role="form"> 

<div class="form-group"> 

<label for="f irstname" class="col-sm-2 control-label">First Name</label> 
<div class="col-sm-10"> 

<input type="text" class="form-control" id="firstname" 
placeholder="Enter First Name"> 

</div> 

</div> 

<div class="form-group"> 

<label for="lastname" class="col-sm-2 control-label">Last Name</label> 

<div class="col-sm-10"> 

<input type="text" class="form-control" id="lastname" 
placeholder="Enter Last Name"> 

</div> 

</div> 

<div class="form-group"> 

<div class="col-sm-offset-2 col-sm-10"> 
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Supported Form Controls 

Bootstrap natively supports the most common form controls mainly input, 
textarea, checkbox, radio, and select. 

Inputs 

The most common form text field is the input field. This is where users will enter 
most of the essential form data. Bootstrap offers support for all native HTML5 
input types: text, password, datetime, datetime-local, date, month, time, week, 
number, email, url, search, tel, and color. Proper type declaration is required to 
make Inputs fully styled. 


<form role="form"> 

<div class="form-group"> 

< label for= " name "> La bel</ label > 

cinput type="text" class="form-control" placeholder="Text input"> 
</div> 
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Textarea 

The textarea is used when you need multiple lines of input. 
Change rows attribute as necessary (fewer rows = smaller box, more rows = 
bigger box). 

<form role="form"> 

<div class="form-group"> 

clabel for="name" >Text Area</label> 

<textarea class="form-control" rows="3" ></textarea> 

</div> 

</form> 


T»xt A m 


CheckBoxes and Radio Buttons 

Checkboxes and radio buttons are great when you want users to choose from a 
list of preset options. 

• When building a form, use checkbox if you want the user to select any 
number of options from a list. Use radio if you want to limit the user to 
just one selection. 

• Use .checkbox-inline or .radio-inline class to a series of checkboxes or 
radios for controls appear on the same line. 

The following example demonstrates both (default and inline) types: 

clabel for="name">Example of Default Checkbox and radio button </label> 
cdiv class="checkbox" > 

clabelxinput type="checkbox" value="">Option l</label> 

</div> 

cdiv class="checkbox" > 



48 


Bootstrap 


clabelxinput type="checkbox" value="">Option 2</label> 

</div> 

<div class="radio" > 

<label> 

<input type="radio" name="optionsRadios" id="optionsRadiosl" 
value="optionl" checked> Option 1 
</label> 

</div> 

<div class="radio" > 

<label> 

<input type="nadio" name="optionsRadios" id="optionsRadios2" 
value="option2" > 

Option 2 - selecting it will deselect option 1 
</label> 

</div> 

<label for="name">Example of Inline Checkbox and radio button </label> 
<div> 

< label class=" checkbox -inline" > 

<input type="checkbox" id="inlineCheckboxl" value="optionl"> Option 1 
</label> 

< label class=" checkbox -inline" > 

<input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2 
</label> 

< label class=" checkbox -inline" > 

<input type="checkbox" id="inlineCheckbox3" value="option3"> Option 3 
</label> 

< label class=" checkbox -inline" > 

<input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
value="optionl" checked> Option 1 
</label> 

< label class=" checkbox -inline" > 

<input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
value="option2" > Option 2 
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Example of Default Checkbox and radio button 

Option 1 

□ Option 2 
• Option 1 

r Option 2 - selecting it writ deselect option 1 
Example of Inline Checkbox and radio button 

□ Option 1 r Option 2 C Opbon 3 • Option t 


Option 2 


Selects 

A select is used when you want to allow the user to pick from multiple options, 
but by default it only allows one. 

• Use <select> for list options with which the user is familiar, such as states 
or numbers. 

• Use multiple="multiple " to allow the users to select more than one option. 
The following example demonstrates both (select and multiple) types: 

<form role="form"> 

<div class="form-group"> 

<label for="name">Select list</label> 

<select class="form-control" > 

<option>l</option> 

<option>2</option> 

<option>3</option> 

<option>4</option> 

<option>5</option> 

</select> 

<label for="name">l v lutiple Select list</label> 

<select multiple class="form-control" > 

<option>l</option> 

<option>2</option> 

<option>3</option> 

<option>4</option> 
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Static Control 

Use the class .form-control-static on a <p>, when you need to place plain text 
next to a form label within a horizontal form. 

<form class="form-horizontal" role="form"> 

<div class="form-group"> 

clabel class="col-sm-2 control-label">Email</label> 

<div class="col-sm-10"> 

<p class= "form -control -static" >email@example. com</p> 

</div> 

</div> 

<div class="form-group"> 

<label for="inputPassword" class="col-sm-2 control- 
label" >Password</label> 

<div class="col-sm-10"> 

<input type="password" class="form-control" id="inputPassword" 
placeholder^' Pas sword" > 

</div> 

</div> 

</form> 

Email em*i@eiamp4e com 

Password 
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Form Control Slates 

In addition to the : focus ( i.e., a user clicks into the input or tabs onto it) state, 
Bootstrap offers styling for disabled inputs and classes for form validation. 

Input Focus 

When an input receives :focus, the outline of the input is removed and a box- 
shadow is applied. 

Disabled Inputs 

If you need to disable an input, simply adding the disabled attribute will not only 
disable it; it will also change the styling and the mouse cursor when the cursor 
hovers over the element. 

Disabled Fieldsets 

Add the disabled attribute to a <fieldset> to disable all the controls within the 
<fieldset> at once. 

Validation Slates 

Bootstrap includes validation styles for errors, warnings, and success messages. 
To use, simply add the appropriate class (. has-warning , .has-error, or .has- 
success ) to the parent element. 

The following example demonstrates all the form control states: 

<form class="form-horizontal" role="form"> 

<div class="form-group"> 

<label class="col-sm-2 control-label" >Focused</label> 

<div class="col-sm-10"> 

cinput class="form-control" id="focusedInput" type="text" 
value="This is focused... "> 

</div> 

</div> 

<div class="form-group"> 

<label for="inputPassword" class="col-sm-2 control-label" > 

Disabled 

</label> 

<div class="col-sm-10"> 
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cinput class="form-control" id="disabledlnput" type="text 
placeholder="Disabled input here..." disabled> 


</div> 


</div> 

<fieldset disabled> 

<div class="form-group"> 

<label for="disabledTextInput" class="col-sm-2 control-label"> 
Disabled input (Fieldset disabled) 

</label> 

<div class="col-sm-10"> 


<input type="text" id="disabledTextInput" class="form-control" 
placeholder="Disabled input"> 


</div> 


</div> 


<div class="form-group"> 

<label for="disabledSelect" class="col-sm-2 control-label" > 
Disabled select menu (Fieldset disabled) 

</label> 

<div class="col-sm-10"> 

<select id="disabledSelect" class="form-control"> 


<option>Disabled select</option> 


</select> 

</div> 

</div> 

</fieldset> 

<div class="form-group has-success"> 

clabel class="col-sm-2 control-label" for="inputSuccess"> 
Input with success 
</label> 

<div class="col-sm-10"> 

<input type="text" class="form-control" id="inputSuccess"> 


</div> 


</div> 



53 


Bootstrap 


<div class="form-group has-warning"> 

<label class="col-sm-2 control-label" for="inputWarning"> 
Input with warning 
</label> 

<div class="col-sm-10"> 

<input type="text" class="form-control" id="inputWarning"> 
</div> 

</div> 

<div class="form-group has-error"> 

<label class="col-sm-2 control-label" for="inputError" > 

Input with error 
</label> 

<div class="col-sm-10"> 

<input type="text" class="form-control" id="inputError"> 
</div> 

</div> 

</form> 

Focused This <s focused 

Disabled 

Disabled input 
(F»e id set disabled) 

Disabled select Disabled select 

menu (Fieldset 
disabled) 

Input with success 

Input with error 


Form Control Sizing 

You can set heights and widths of forms using classes like .input-lg and .col-lg- 
*respectively. The following example demonstrates this: 


<form role="form"> 

<div class="form-group"> 

<input class="form-control input-lg" type="text" 
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placeholder^' . input-lg"> 

</div> 

<div class="form-group"> 

<input class="form-control" type="text" placeholder="Def ault input"> 
</div> 

<div class="form-group"> 

<input class = "form-control input-sm" type="text" placeholder^' . input-sm"> 
</div> 

<div class="form-group"> 

</div> 

<div class="form-group"> 

<select class="form-control input-lg"> 

<option value=" "> . input- lg< /opt ion > 

</select> 

</div> 

<div class="form-group"> 

<select class="form-control" > 

<option value="">Default select</option> 

</select> 

</div> 

<div class="form-group"> 

<select class="form-control input-sm"> 

<option value=" "> . input- sm< /opt ion > 

</select> 

</div> 

<div class="row"> 

<div class="col-lg-2"> 

<input type="text" class = "form-control" placeholder^' . col-lg-2"> 
</div> 

<div class="col-lg-3"> 

<input type="text" class="form-control" placeholder=" . col-lg-3"> 
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</div> 

<div class="col-lg-4"> 

<input type="text" class="form-control" placeholder=" . col-lg-4"> 
</div> 

</div> 

</form> 



Help Text 

Bootstrap form controls can have a block level help text that flows with the 
inputs. To add a full width block of content, use the .help-block after the 
<input>. The following example demonstrates this: 

<form role="form"> 

<span>Example of Help Text</span> 

cinput class="form-control" type="text" placeholder=""> 

<span class="help-block">A longer block of help text that 
breaks onto a new line and may extend beyond one line.</span> 

</form> 

Example of Help Text 

A longer block of help text that breaks onto a new line and may extend beyond one line 
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This chapter covers the useage of Bootstrap button with examples. Anything 
that is given a class of.btnwill inherit the default look of a gray button with 
rounded corners. However, Bootstrap provides some options to style buttons, 
which are summarized in the following table: 


Class 

Description 

btn 

Default/ Standard button. 

btn-primary 

Provides extra visual weight and identifies the primary action 
in a set of buttons. 

btn-success 

Indicates a successful or positive action. 

btn -info 

Contextual button for informational alert messages. 

btn-warning 

Indicates caution should be taken with this action. 

btn-danger 

Indicates a dangerous or potentially negative action. 

btn-link 

Deemphasize a button by making it look like a link while 
maintaining button behavior. 


The following example demonstrates all the above button classes: 

<!-- Standard button --> 

cbutton type="button" class="btn btn-default">Default Button</button> 

<!-- Provides extra visual weight and identifies the primary action in a 
set of buttons --> 

cbutton type="button" class="btn btn-primary">Primary Button</button> 

<!-- Indicates a successful or positive action --> 

cbutton type="button" class="btn btn-success">Success Buttonc/button> 
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<!-- Contextual button for informational alert messages --> 
cbutton type="button" class="btn btn-info">Info Button</button> 

<!-- Indicates caution should be taken with this action --> 
cbutton type="button" class="btn btn-warning">Warning Button</button> 

<!-- Indicates a dangerous or potentially negative action --> 
cbutton type="button" class="btn btn-danger">Danger Buttonc/button> 

c!-- Deemphasize a button by making it look like a link while 
maintaining button behavior --> 

cbutton type="button" class="btn btn-link">Link Buttonc/button> 



Button Size 

The following table summarizes the classes used to get buttons of various sizes: 


Class 

Description 

.btn-lg 

This makes the button size large. 

.btn-sm 

This makes the button size small. 

.btn-xs 

This makes the button size extra small. 

.btn-block 

This creates block level buttons— those that span the full width 
of a parent. 


The following example demonstrates this: 


<P> 

cbutton type="button" class="btn btn-primary btn-lg"> 
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Lange Primary button 
</button> 

cbutton type="button" class="btn btn-default btn-lg"> 

Large button 
</button> 

</p> 

<P> 

cbutton type="button" class="btn btn-primary" > 

Default size Primary button 
</button> 

cbutton type="button" class="btn btn-default" > 

Default size button 
c/button> 

</p> 

<P> 

cbutton type="button" class="btn btn-primary btn-sm"> 

Small Primary button 
c/button> 

cbutton type="button" class="btn btn-default btn-sm"> 

Small button 
c/button> 

</p> 

<P> 

cbutton type="button" class="btn btn-primary btn-xs"> 

Extra small Primary button 
c/button> 

cbutton type="button" class="btn btn-default btn-xs"> 

Extra small button 
c/button> 

</p> 

<P> 

cbutton type="button" class="btn btn-primary btn-lg btn-block"> 
Block level Primary button 
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Button State 

Bootstrap provides classes which allow you to change the state of buttons as: 
active, disabled, etc., each of which are discussed in the following sections. 

Active State 

Buttons will appear pressed (with a darker background, darker border, and inset 
shadow) when active. The following table summarizes classes used to make 
button elements and anchor elements active: 


Element 

Class 

Button element 

Use .active class to show that it is activated. 

Anchor element 

Use .active class to <a> buttons to show that it is activated. 


The following example demonstrates this: 

<P> 

cbutton type="button" class="btn btn-default btn-lg "> 
Default Button 
</button> 
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cbutton type="button" class="btn btn-default btn-lg active"> 
Active Button 
</button> 

</p> 

<P> 

<button type="button" class="btn btn-primary btn-lg "> 
Primary button 
</button> 

<button type="button" class="btn btn-primary btn-lg active"> 
Active Primary button 
</button> 

</p> 


Default Button Active Button 


Primary button I Active Primary button 


Deafult Link Active Link 



Active Primary link 


Disabled State 

When you disable a button, it will fade in color by 50%, and lose the gradient. 

The following table summarizes classes used to make button element and 
anchor element disabled: 


Element 

Class 

Button element 

Add the disabled attribute to <button> buttons. 

Anchor element 

Add the disabled class to <a> buttons. 

Note: This class will only change the <a>'s appearance, not 
its functionality. You need to use custom JavaScript to 
disable links here. 
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The following example demonstrates this: 

<P> 

cbutton type="button" class="btn btn-default btn-lg"> 

Default Button 
</button> 

<button type="button" class="btn btn-default btn-lg" disabled="disabled" > 
Disabled Button 
</button> 

</p> 

<P> 

<button type="button" class="btn btn-primary btn-lg "> 

Primary button 
</button> 

<button type="button" class="btn btn-primary btn-lg" disabled="disabled"> 
Disabled Primary button 
</button> 

</p> 

<P> 

<a href ="#" class="btn btn-default btn-lg" role="button"> 

Link 

</a> 

<a href="#" class="btn btn-default btn-lg disabled" role="button" > 
Disabled Link 
</a> 

</p> 

<P> 

<a href="#" class="btn btn-primary btn-lg" role="button"> 

Primary link 
</a> 

<a href="#" class="btn btn-primary btn-lg disabled" role="button" > 
Disabled Primary link 
</a> 

</p> 
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Default Button Disabled Button 


Primary button 


Link Disabled 


Primary link 


Button Tags 

You may use button classes with <a>, <button>, or <input> element. But it is 
recommended that you use it with <button> elements mostly to avoid cross 
browser inconsistency issues. 

The following example demonstrates this: 

<a class="btn btn-default" href="#" role="button">Link</a> 
cbutton class="btn btn-default" type="submit">Button</button> 

<input class="btn btn-default" type="button" value="Input" > 

<input class="btn btn-default" type="submit" value="Submit"> 



Link 

Button 

Input 

Submit 
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This chapter covers the Bootstrap support for images. Bootstrap provides three 
classes that can be used to apply some simple styles to images: 

• ,img-rounded\ adds border-radius:6px to give the image rounded corners. 

• ,img-circle\ makes the entire image round by adding border-radius: 500px. 

• .img-thumbnail\ adds a bit of padding and a gray border: 

The following example demonstrates this: 

<img src=" /bootstrap/ images /down load . png" 
class="img- rounded "> 

<img src=" /bootstrap/ images /down load . png" 
class="img- circle" > 

<img src=" /bootstrap/ images /down load . png" 
class="img- thumbnail" > 
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This chapter discusses some of the helper classes in Bootstrap that might come 
in handy. 

Close icon 

Use the generic close icon for dismissing content like modals and alerts. Use the 
class close to get the close icon. 

<p>Close Icon Example 

cbutton type="button" class="close" aria-hidden="true"> 

Stimes; 

</button> 

</p> 


Close loon Example 


Carets 


Use carets to indicate dropdown functionality and direction. To get this 
functionality use the class caret with a <span> element. 



Quick Floats 

You can float an element to the left or right with class pull-left or pull- 
right respectively. The following example demonstrates this. 

<div class="pull-left"> 

Quick Float to left 
</div> 



65 



Bootstrap 



To align components in navbars with utility classes, use .navbar- 
left or .navbar-right instead. See the navbar chapter for details. 

Center Content Blocks 

Use class center-block to set an element to center. 


<div class="row"> 

<div class="center-block" style="width : 200px; background-color :#ccc; "> 
This is an example for center-block 
</div> 

</div> 


This is an example lor 
center-block 


Clearfix 

To clear the float of any element, use the .clearfix class. 

<div class="clearf ix" style="background : #D8D8D8j border : lpx solid 
# 000 ; padding: 10px;"> 

<div class="pull-left" style="background:#58D3F7; "> 

Quick Float to left 
</div> 

<div class="pull-right" style="background : #DA81F5;"> 

Quick Float to right 
</div> 

</div> 
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Quick Float to left 


Quick Float to right 


Showing and Hiding Content 

You can force an element to be shown or hidden (including for screen readers) 
with the use of classes .show and .hidden. 

<div class="row" style=" padding : 91px 100px 19px 50px;"> 

<div c las s=" show" sty le=" left -margin : 10px; width : 300px; background- 
color :#ccc; "> 

This is an example for show class 
</div> 

<div class = " hidden" style= "width : 200px; background - color :#ccc; "> 

This is an example for hide class 
</div> 

</div> 


This is an example for snow class 


Screen Reader Content 

You can hide an element to all devices except screen readers with the class .sr- 
only. 

<div class="row" style="padding : 91px 100px 19px 50px;"> 

<form class="form-inline" role="form"> 

<div class="form-group"> 

<label class="sr-only" for="email" >Email address</label> 

<input type="email" class="form-control" placeholder="Enter email"> 
</div> 

<div class="form-group"> 

<label class="sr-only" for="pass">Password</label> 

<input type="password" class="form-control" placeholder="Password"> 
</div> 

</div> 
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Here we can see that the label of both the input types is assigned the class sr- 
only, hence labels will be visible to only screen readers. 
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Bootstrap provides some handful helper classes for faster mobile-friendly 
development. These can be used for showing and hiding content by device via 
media query, combined with large, small, and medium devices. 

Use these sparingly and avoid creating entirely different versions of the same 
site. Responsive utilities are currently only available for block and table 
toggling. 


Classes 

Devices 

.visible-xs 

Extra small (less than 768px) visible 

.visible-sm 

Small (up to 768 px) visible 

.visible-md 

Medium (768 px to 991 px) visible 

.visible-lg 

Larger (992 px and above) visible 

.hidden-xs 

Extra small (less than 768px) hidden 

.hidden-sm 

Small (up to 768 px) hidden 

.hidden-md 

Medium (768 px to 991 px) hidden 

.hidden-lg 

Larger (992 px and above) hidden 


Print Classes 


The following table lists the print classes. Use these for toggling the content for 
print. 


Classes 

Print 

.visible-print 

Yes Visible 
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.hidden-print Visible only to browser not to print. 

Example 

The following example demonstrates the use of above listed helper classes. 
Resize your browser or load the example on different devices to test the 
responsive utility classes. 

<div class="container" style="padding: 40px;"> 

<div class="row visible-on"> 

<div class="col-xs-6 col-sm-3" style="background-color : #dedef8; 
box-shadow: inset lpx -lpx lpx #444j inset -lpx lpx lpx #444; "> 
<span class="hidden-xs">Extra small</span> 

<span class="visible-xs" >•/ Visible on x-small</span> 

</div> 

<div class="col-xs-6 col-sm-3" style="background-color : #dedef8; 
box-shadow: inset lpx -lpx lpx #444j inset -lpx lpx lpx #444; "> 
<span class=" hidden -sm">Small</span> 

<span class="visible-sm" >/ Visible on small</span> 

</div> 

<div class="clearfix visible-xs" ></div> 

<div class="col-xs-6 col-sm-3" style="background-color : #dedef8; 
box-shadow: inset lpx -lpx lpx #444j inset -lpx lpx lpx #444; "> 
<span class="hidden-md">l v ledium</span> 

<span class="visible-md" >V Visible on medium</span> 

</div> 

<div class = "col-xs-6 col-sm-3" style="background-color : #dedef8; 
box-shadow: inset lpx -lpx lpx #444j inset -lpx lpx lpx #444; "> 
<span class=" hidden -lg">Large</span> 

<span class="visible-lg" >/ Visible on large</span> 

</div> 

</div> 


r~6tlllW I I MlOoi I /VMiUBllO 

Checkmarks indicates that the element is visible in your current viewport. 
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13. GLYPHICONS 


This chapter will discuss about Glyphicons, its use and some examples. 
Bootstrap bundles 200 glyphs in font format. Let us now understand what 
Glyphicons are. 

What are Glyphicons? 

Glyphicons are icon fonts which you can use in your web projects. Glyphicons 
Halflingsare not free and require licensing, however their creator has made 
them available for Bootstrap projects free of cost. 

"It is recommended, as a thank you, we ask you to include an optional link back 
to GLYPHICONS whenever practical." — Bootstrap Documentation 

Where to find Glyphicons? 

Now that we have downloaded Bootstrap 3.x version and understand its 
directory structure from the chapter Environment Setup, glyphicons can be 
found within the fonts folder. This contains the following files: 

• glyphicons-halflings-regular.eot 

• glyph icons-halflings-regular.svg 

• glyph icons-halflings-regular.ttf 

• glyphicons-halflings-regular.woff 

Associated CSS rules are present within bootstrap. css and bootstrap-min. css files 
within css folder of dist folder. You can see the available glyphicons at this 
link: http://www.tutorialspoint.com/bootstrap/bootstrap glyph icons.htm . 

Usage 

To use the icons, simply use the following code just about anywhere in your 
code. Leave a space between the icon and text for proper padding. 


<span class = "glyphicon glyphicon-search"x/span> 


The following example demonstrates this: 


<P> 

cbutton type="button" class="btn btn-def ault" > 

<span class="glyphicon glyphicon-sort-by-attributes" ></span> 
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</button> 

cbutton type="button" class="btn btn-default" > 

<span class="glyphicon glyph icon- sort -by- attributes- alt "></span> 
</button> 

<button type="button" class="btn btn-default" > 

<span class="glyphicon glyphicon-sont-by-orden" ></span> 

</button> 

<button type="button" class="btn btn-default" > 

<span class="glyphicon glyphicon-sont-by-onder-alt"x/span> 
</button> 

</p> 

cbutton type="button" class="btn btn-default btn-lg"> 

<span class = "glyphicon glyphicon-user"x/span> User 
</button> 

cbutton type="button" class="btn btn-default btn-sm"> 
cspan class = "glyphicon glyphicon-user"x/span> User 
c/button> 

cbutton type="button" class="btn btn-default btn-xs"> 
cspan class = "glyphicon glyphicon-user"x/span> User 
c/button> 
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This chapter will highlight about Bootstrap dropdown menus. Dropdown menus 
are toggleable, contextual menus for displaying links in a list format. This can be 
made interactive with the dropdown JavaScript plugin. 

To use dropdown, just wrap the dropdown menu within the class .dropdown. 
The following example demonstrates a basic dropdown menu: 

<div class="dropdown" > 

cbutton type="button" class="btn dropdown-toggle" id="dropdownl v lenul" 
data -toggle=" dropdown" > 

Topics 

<span class="caret" ></span> 

</button> 

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul"> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Dava</a> 

</li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Data Mining</a> 

</li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#"> 

Data Communication/Networking 
</a> 

</li> 

<li role="presentation" class="divider" ></ li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Separated link</a> 
</li> 

</ul> 

</div> 
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Topics * 

Java 

Data Mining 

Data Communication/Networking 
Separated link 


Options 

Alignment 

Align the dropdown menu to right by adding the class .pull- 
right to .dropdown-menu. The following example demonstrates this! 

<div class="dropdown" > 

cbutton type="button" class="btn dropdown-toggle" id="dropdownl v lenul" 
data -toggle=" dropdown" >Topics 
<span class="caret" ></span> 

</button> 

<ul class="dropdown-menu pull-right" role="menu" 
aria-labelledby="dropdownMenul"> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Dava</a> 

</li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Data Mining</a> 

</li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#"> 

Data Communication/Networking 
</a> 

</li> 

<li role="presentation" class="divider" ></li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Separated link</a> 
</li> 
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Headers 

You can add a header to label sections of actions in any dropdown menu by 
using the class dropdown-header. The following example demonstrates this: 

<div class="dropdown" > 

cbutton type="button" class="btn dropdown-toggle" id="dropdownl v lenul" 
data -toggle=" dropdown" > 

Topics 

<span class="caret" ></span> 

</button> 

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul"> 

<li role="presentation" class="dropdown-header">Dropdown header</li> 
<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Dava</a> 

</li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#">Data Mining</a> 

</li> 

<li role="presentation" > 

<a role="menuitem" tabindex=" -1" href="#"> 

Data Communication/Networking 
</a> 

</li> 

<li role="presentation" class="divider" ></ li> 

<li role="presentation" class="dropdown-header">Dropdown header</li> 
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<li role="presentation" > 

<a role="menuitem" tabindex=" -1" hnef="#">Sepanated link</a> 
</li> 

</ul> 

</div> 


Topics ▼ 

Java 

Data Mining 

Data Communication/Networking 

Separated link 



76 



15. BUTTON GROUPS 


Button groups allow multiple buttons to be stacked together on a single line. 
This is useful when you want to place items like alignment buttons together. You 
can add on optional JavaScript radio and checkbox style behavior with Bootstrap 
Button Plugin. 


Following table summarizes the important classes Bootstrap provides to use 
button groups: 


Class 

Description 

Code Sample 

.btn-group 

This class is used for a basic 
button group. Wrap a series of 
buttons with class 

.btn in .btn-group. 

<div class = "btn-group"> 

cbutton type="button" 
class="btn btn- 
def a ult" >Buttonl</button> 

cbutton type=" button" 
class="btn btn- 
def ault" >Button2</button> 

</div> 

.btn-toolbar 

This helps to combine sets of 
<div class="btn-group"> into 
a <div class="btn-toolbar"> 
for more complex 

components. 

cdiv class="btn-toolbar" 

nole="toolbar"> 

cdiv class="btn- 
group">. . .c/div> 

cdiv class="btn- 
group">. . . c/div> 

c/div> 

.btn-group- 
Ig, .btn- 
group-sm, 
.btn-group- 
xs 

These classes can be applied 
to button group instead of 
resizing each button. 

cdiv class="btn-group btn- 
group-lg">. . . c/div> 

cdiv class="btn-group btn- 
group-sm">. . . c/div> 

cdiv class="btn-group btn- 
group-xs">. . . c/div> 

.btn-group- 

vertical 

This class make a set of 
buttons appear vertically 

cdiv class = "btn-group- 
vertical"> 
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stacked rather than 

horizontally. </div> 


Basic Button Group 

The following example demonstrates the use of class .btn-group discussed in 
the above table: 


cdiv class="btn-group"> 




cbutton type="button" 

class="btn 

btn-default"> Button 

lc/button> 

cbutton type="button" 

class="btn 

btn-default"> Button 

2c/button> 

cbutton type="button" 

class="btn 

btn-default"> Button 

3c/button> 

c/div> 








Button 1 

Button 2 

Button 3 



Button Toolbar 

The following example demonstrates the use of class .btn-toolbar discussed in 
the above table: 


<div class="btn-toolbar" role 
<div class="btn-group"> 
cbutton type="button" class 
cbutton type="button" class 
cbutton type="button" class 
</div> 

cdiv class="btn-group"> 
cbutton type="button" class 
cbutton type="button" class 
cbutton type="button" class 
c/div> 

cdiv class="btn-group"> 
cbutton type="button" class 
cbutton type="button" class 


="toolbar" > 

"btn btn-default"> Button 
"btn btn-default">Button 
"btn btn-default"> Button 


"btn btn-default"> Button 
"btn btn-default">Button 
"btn btn-default"> Button 


"btn btn-default">Button 
"btn btn-default"> Button 


lc/button> 

2c/button> 

3c/button> 


4c/button> 

5c/button> 

6c/button> 


7c/button> 

8c/button> 
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cbutton type="button" class="btn btn-default">Button 9</button> 
</div> 

</div> 


Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Button 8 Button 9 


Button Size 


The following example demonstrates the use of class .btn-group-* discussed in 
the above table: 


<div class="btn-group btn-group-lg"> 


cbutton 

type="button" 

class="btn 

btn-default"> Button 

lc/button> 

cbutton 

type="button" 

class="btn 

btn-default"> Button 

2c/button> 

cbutton 

type="button" 

class="btn 

btn-default"> Button 

3c/button> 

c/div> 





cdiv class="btn-group 

btn-group- 

5m"> 


cbutton 

type="button" 

class="btn 

btn-default"> Button 

4c/button> 

cbutton 

type="button" 

class="btn 

btn-default"> Button 

5c/button> 

cbutton 

type="button" 

class="btn 

btn-default"> Button 

6c/button> 

c/div> 





cdiv class="btn-group 

btn-group-xs"> 


cbutton 

type="button" 

class="btn 

btn-default"> Button 

7c/button> 

cbutton 

type="button" 

class="btn 

btn-default"> Button 

8c/button> 

cbutton 

type="button" 

class="btn 

btn-default"> Button 

9c/button> 

c/div> 









Button 1 

Button 2 

Button 3 

Button 4 Button 5 Button 6 Button 7 Button 8 Button 9 





Nesting 

You can nest button groups within another button group i.e, place a .btn- 
group within another .btn-group. This is done when you want dropdown menus 
mixed with a series of buttons. 
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<div class="btn-group"> 

<button type="button" class="btn btn-default">Button l</button> 
<button type="button" class="btn btn-default">Button 2</button> 

<div class="btn-group"> 

cbutton type="button" class="btn btn-default dropdown-toggle" 
data -toggle=" dropdown" > 

Dropdown 

<span class="caret"x/span> 

</button> 

<ul class="dropdown-menu"> 

<lixa href="#">Dropdown link l</ax/li> 

<lixa href="#">Dropdown link 2</ax/li> 

</ul> 

</div> 

</div> 




Button 1 Button 2 

Dropdown » 


Dropdown link 1 

Dropdown link 2 



Vertical Buttongroup 

The following example demonstrates the use of class .btn-group- 
vertical discussed in the above table: 

<div class="btn -group -vertical" > 

cbutton type="button" class="btn btn-default">Button l</button> 
cbutton type="button" class="btn btn-default">Button 2c/button> 

cdiv c la ss="btn- group -vertical" > 

cbutton type="button" class="btn btn-default dropdown-toggle" 
data -toggle=" dropdown" > 

Dropdown 
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<span class="caret" ></span> 

</button> 

<ul class="dropdown-menu"> 

<lixa hnef="#">Dnopdown link l</ax/li> 
<lixa hnef="#">Dnopdown link 2</ax/li> 
</ul> 

</div> 

</div> 


Button 1 


Button 2 


Dropdown » 


Dropdown link 1 

Dropdown link 2 
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This chapter will discuss about how to add dropdown menu to buttons using 
Bootstrap classes. To add a dropdown to a button, simply wrap the button and 
dropdown menu in a .btn-group. You can also use <span 
class="caret"x/span> to act as an indicator that the button is a dropdown. 

The following example demonstrates a basic single button dropdowns: 

<div class="btn-group"> 

cbutton type="button" class="btn btn-default dropdown-toggle" 
data -toggle=" dropdown" > 

Default <span class="caret"x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 

<lixa href="#" >Another action</ax/li> 

<lixa href="#" >Something else here</ax/li> 

<li class="divider"x/li> 

<lixa href="#" Separated link</ax/li> 

</ul> 

</div> 

<div class="btn-group"> 

<button type="button" class="btn btn-primary dropdown-toggle" 
data -toggle=" dropdown" > 

Primary <span class="caret" x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 

<lixa href="#" >Another action</ax/li> 

<lixa href="#" >Something else here</ax/li> 

<li class="divider"x/li> 

<lixa href="#" >Separated link</ax/li> 


</ul> 
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Split Button Dropdowns 

Split button dropdowns use the same general style as the dropdown button but 
add a primary action along with the dropdown. Split buttons have the primary 
action on the left and a toggle on the right that displays the dropdown. 

<div class="btn-group"> 

cbutton type="button" class="btn btn-default" >Default</button> 
cbutton type="button" class="btn btn-default dropdown-toggle" 
data -toggle=" dropdown" > 

<span class="caret" ></span> 

<span class="sr-only">Toggle Dropdown</span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else here</ax/li> 

<li class = "divider"x/li> 

<lixa href="#">Separated link</ax/li> 

</ul> 

</div> 

<div class="btn-group"> 

<button type="button" class="btn btn-primary" >Primary</button> 

<button type="button" class="btn btn-primary dropdown-toggle" 
data -toggle=" dropdown" > 

<span class="caret" x/span> 

<span class="sr-only">Toggle Dropdown</span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 



tutorialspoint 

MPLYEA3YLEARNING 


83 




Bootstrap 


<lixa href="#">Another action</ax/li> 
<lixa href="#">Something else hene</ax/li> 
<li class = "dividen" x/li> 

<lixa href="#">Sepanated link</ax/li> 

</ul> 

</div> 


Primary - 


Button Dropdown Size 

You can use the dropdowns with any button size: .btn-large, .btn-sm, or.btn- 
xs. 

<div class="btn-group"> 

<button type="button" class="btn btn-default dropdown-toggle btn-lg" 
data -toggle=" dropdown" > 

Default <span class="caret" x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else here</ax/li> 

<li class = "divider" x/li> 

<lixa href="#">Separated link</ax/li> 

</ul> 

</div> 

<div class="btn-group"> 

<button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
data -toggle=" dropdown" > 

Primary <span class="caret" x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 
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<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else hene</ax/li> 

<li class = "dividen" x/li> 

<lixa href="#">Sepanated link</ax/li> 

</ul> 

</div> 

<div class="btn-group"> 

<button type="button" class="btn btn-success dropdown-toggle btn-xs" 
data -toggle=" dropdown" > 

Success <span class="caret" x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else here</ax/li> 

<li class = "divider" x/li> 

<lixa href="#">Separated link</ax/li> 

</ul> 

</div> 


Default ▼ 


Primary- 


Dropup Variation 

Menus can also be built to drop up rather than down. To achieve this, simply 
add .dropup to the parent .btn-group container. 

<div class="row" style="margin-left : 50px; margin-top: 200px"> 

<div class="btn-group dropup"> 

<button type="button" class="btn btn-default dropdown-toggle" 
data -toggle=" dropdown" > 

Default <span class = "caret" x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 
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<lixa href="#">Action</ax/li> 

<lixa hnef="#">Anothen action</ax/li> 

<lixa hnef="#">Something else hene</ax/li> 

<li class = "dividen"x/li> 

<lixa hnef="#">Sepanated link</ax/li> 

</ul> 

</div> 

<div class="btn-group dnopup"> 

<button type="button" class="btn btn-primany dropdown-toggle" 
data -toggle=" dropdown" > 

Primary <span class = "caret" x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else here</ax/li> 

<li class = "divider" x/li> 

<lixa href="#">Separated link</ax/li> 


</ul> 

</div> 


</div> 


Action 

Another action 
Something else here 


Separated link 


Default 
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17. INPUT GROUPS 


This chapter explains about one more feature Bootstrap supports, the Input 
Groups. Input groups are extended Form Controls. Using input groups you can 
easily prepend and append text or buttons to the text-based inputs. 

By adding prepended and appended content to an input field, you can add 
common elements to the user's input. For example, you can add the dollar 
symbol, the @ for a Twitter username, or anything else that might be common 
for your application interface. 

To prepend or append elements to a .form-control: 

• Wrap it in a <div> with class .input-group. 

• As a next step, within that same <div>, place your extra content inside a 
<span> with class .input-group-addon. 

• Now place this <span> either before or after the <input> element. 

For cross browser compatibility, avoid using <select> elements here as they 
cannot be fully styled in WebKit browsers. Also do not apply input group classes 
directly to form groups. An input group is an isolated component. 


Basic Input Group 


The following example demonstrates basic input group: 

<div style="padding : 100px 100px 10px;"> 

<form class="bs-example bs-example-form" role="form"> 

<div class="input-group"> 

<span class=" input -group- addon ">@< /span > 

<input type="text" class="form-control" placeholder="twitterhandle" > 
</div> 

<br> 

<div class="input-group"> 

cinput type="text" class="form-control" > 

<span class=" input -group- addon "> .00</span> 

</div> 

<br> 
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<div class="input-group"> 

<span class=" input -group- addon ">$< /span > 
cinput type="text" class="form-control" > 
<span class=" input -group- addon "> .00</span> 
</div> 

</form> 

</div> 


.00 

$ 00 


Input Group Sizing 

You can change the size of the input groups, by adding the relative form sizing 
classes like .input-group-lg, input-group-sm, input-group-xs to the .input- 
group itself. The contents within will automatically resize. 

Following examples demonstrates this: 

<div style="padding : 100px 100px 10px;"> 

<form class="bs-example bs-example-form" role="form"> 

<div class="input-group input-group-lg"> 

<span class=" input -group- addon ">@< /span > 

<input type="text" class="form-control" placeholder="Twitterhandle" > 
</divxbr> 

<div class="input-group"> 

<span class=" input -group- addon ">@< /span > 

<input type="text" class="form-control" placeholder="Twitterhandle" > 
</divxbr> 

<div class="input-group input-group-sm"> 

<span class=" input -group- addon ">@< /span > 
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<input type="text" class="form-control" placeholder="Twitterhandle" > 
</div> 

</fonm> 

</div> 



Checkboxes and Radio Addons 

You can preappend or append radio buttons and checkboxes instead of text as 
demonstrated in the following example: 

<div style="padding : 100px 100px 10px;"> 

<form class="bs-example bs-example-form" role="form"> 

<div class="row"> 

<div class="col-lg-6"> 

<div class="input-group"> 

<span c la s s=" input -group- addon "> 

<input type="checkbox" > 

</span> 

<input type="text" class="form-control"> 

</div><!-- /input-group --> 

</div><!-- /.col-lg-6 --><br> 

<div class="col-lg-6"> 

<div class="input-group"> 

<span c la s s=" input -group- addon "> 
cinput type="radio"> 

</span> 

<input type="text" class="form-control"> 

</div><!-- /input-group --> 

</div><!-- /.col-lg-6 --> 
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</div><!-- /.now --> 
</form> 

</div> 


Button Addons 

You can even preappend or append buttons in input groups. Instead of .input- 
group-addon class, you'll need to use class .input-group-btn to wrap the 
buttons. This is required due to the default browser styles that cannot be 
overridden. Following examples demonstrates this: 

<div style="padding : 100px 100px 10px;"> 

<form class="bs-example bs-example-form" role="form"> 

<div class="row"> 

<div class="col-lg-6"> 

<div class="input-gnoup"> 

<span class="input-group-btn"> 

<button class="btn btn-default" type="button" > 

Go! 

</button> 

</span> 

<input type="text" class="form-control"> 

</div><!-- /input-group --> 

</div><!-- /.col-lg-6 --><br> 

<div class="col-lg-6"> 

<div class="input-group"> 

<input type="text" class="fonm-contnol"> 

<span class="input-group-btn"> 

<button class="btn btn-default" type="button" > 

Go! 

</button> 
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Buttons with Dropdowns 

Adding buttons with dropdown menus in input groups can be done by simply 
wrapping the button and dropdown menu in a .input-group-btn class as 
demonstrated in the following example: 

<div style="padding : 100px 100px 10px;"> 

<form class="bs-example bs-example-form" role="form"> 

<div class="row"> 

<div class="col-lg-6"> 

<div class="input-group"> 

<div class="input-group-btn" > 

cbutton type="button" class="btn btn-default 
dropdown -toggle" data -toggle=" dropdown" > 

DropdownMenu 

<span class="caret" ></span> 

</button> 

<ul class="dropdown-menu" > 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else here</ax/li> 

<li class="divider"x/li> 

<lixa href="#">Separated link</ax/li> 

</ul> 
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</div><!-- /btn-group --> 

<input type="text" class="form-contnol"> 

</div><!-- /input-group --> 

</div><!-- /.col-lg-6 --><br> 

<div class="col-lg-6"> 

<div class="input-gnoup"> 

<input type="text" class="form-contnol"> 

<div class="input-gnoup-btn" > 

<button type="button" class="btn btn-default 
dropdown -toggle" data -toggle=" dropdown" > 
DropdownMenu 

<span class="caret" ></span> 

</button> 

<ul class="dropdown-menu pull-right"> 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 
<lixa href="#">Something else here</ax/li> 
<li class="divider"x/li> 

<lixa href="#">Separated link</ax/li> 

</ul> 

</divx!-- /btn-group --> 

</divx!-- /input-group --> 

</divx!-- /.col-lg-6 --> 

</divx!-- /.row --> 

</form> 

</div> 




DropdownMenu » 





DropdownMenu * 
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Segmented Buttons 

To segment button dropdowns in input groups, use the same general style as 
the dropdown button, but add a primary action along with the dropdown as can 
be seen in the following example: 

<div style="padding : 100px 100px 10px;"> 

<form class="bs-example bs-example-form" role="form"> 

<div class="row"> 

<div class="col-lg-6"> 

<div class="input-group"> 

<div class="input-group-btn" > 

<button type="button" class="btn btn-default" 
tabindex="-l">Dropdwon Menu 
</button> 

<button type="button" class="btn btn-default 

dropdown -toggle" data-toggle="dropdown" tabindex="-l"> 
<span class="caret" ></span> 

<span class="sr-only">Toggle Dropdown</span> 
</button> 

<ul class="dropdown-menu" > 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else here</ax/li> 

<li class="divider" x/li> 

<lixa href="#">Separated linl«/ax/li> 

</ul> 

</divx!-- /btn-group --> 

<input type="text" class="form-control"> 

</divx!-- /input-group --> 

</divx!-- /.col-lg-6 --xbr> 

<div class="col-lg-6"> 

<div class="input-group"> 

<input type="text" class="form-control"> 


<div class="input-group-btn" > 

<button type="button" class="btn btn-default" 
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tabindex="-l">Dropdwon Menu 
</button> 

<button type="button" class="btn btn-default 

dropdown -toggle" data-toggle="dropdown" tabindex="-l"> 
<span class="caret" ></span> 

<span class="sr-only">Toggle Dropdown</span> 
</button> 

<ul class="dropdown-menu pull-right"> 

<lixa href="#">Action</ax/li> 

<lixa href="#">Another action</ax/li> 

<lixa href="#">Something else here</ax/li> 

<li class="divider"x/li> 

<lixa href="#">Separated link</ax/li> 

</ul> 

</divx!-- /btn-group --> 

</divx!-- /input-group --> 

</divx!-- /.col-lg-6 --> 

</divx!-- /.row --> 

</form> 

</div> 
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18. NAVIGATION ELEMENTS 


Bootstrap provides a few different options for styling navigation elements. All of 
them share the same markup and base class, .nav. Bootstrap also provides a 
helper class, to share markup and states. Swap modifier classes to switch 
between each style. 

Tabular Navigation or Tabs 

To create a tabbed navigation menu: 

• Start with a basic unordered list with the base class of .nav 

• Add class .nav-tabs. 

The following example demonstrates this: 

<p>Tabs Example</p> 

<ul class="nav nav-tabs"> 

<li class="active" ><a href="#" >Home</ax/li> 
clixa href="#">SVN</ax/li> 
clixa href="#" >iOS</ax/li> 
clixa href="#">VB.Net</ax/li> 
clixa href="#" >Davac/ax/li> 
cli>ca href="#">PHPc/a>c/li> 
c/ul> 


Tabs Example 

Home SVN OS VB.Net J 


Pills Navigation 

Basic Pills 

To turn the tabs into pills, follow the same steps as above, use the class .nav- 
pills instead of .nav-tabs. 
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The following example demonstrates this: 

<p>Pills Example</p> 

<ul class="nav nav-pills"> 

<li class="active" ><a href="#" >Home</ax/li> 
<lixa href="#" >SVN</ax/li> 

<lixa href="#">iOS</ax/li> 

<lixa href="#" >VB. Net</ax/li> 
clixa href="#">Davac/ax/li> 

<lixa href="#" >PHP</ax/li> 

</ul> 


Pills Example 



Verticle Pills 

You can stack the pills vertically using the class .nav-stacked along with the 
classes: .nav, .nav-pills. 

The following example demonstrates this: 

<p>Vertical Pills Example</p> 

<ul class="nav nav-pills nav-stacked"> 

<li class="active" xa href="#" >Home</ax/li> 
clixa href="#">SVN</ax/li> 
clixa href="#">iOSc/a>c/li> 
clixa href="#" >VB. Netc/a>c/li> 
cli>ca href="#">Davac/ax/li> 
clixa href="#" >PHPc/a>c/li> 
c/ul> 
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Justified Nav 

You can make tabs or pills of equal widths as of their parent at screens wider 

than 768px using class .nav-justified along with .nav, .nav-tabs or .nav, .nav- 

pills respectively. On smaller screens, the nav links are stacked. 

The following example demonstrates this: 

<p>Dustif ied Nav Elements Example</p> 

<ul class="nav nav-pills nav- justified" > 

<li class="active" ><a href="#" >Home</ax/li> 

<lixa href="#">SVN</ax/li> 

<lixa href="#" >iOS</ax/li> 

<lixa href="#">VB.Net</ax/li> 

<lixa href="#" >Dava</ax/li> 

<lixa href="#">PHP</ax/li> 

</ulxbrxbrxbr> 

<ul class="nav nav-tabs nav- justified" > 

<li class="active" xa href="#" >Home</ax/li> 

<lixa href="#">SVN</ax/li> 

<lixa href="#" >iOS</ax/li> 

<lixa href="#">VB.Net</ax/li> 

<lixa href="#" >Dava</ax/li> 

<lixa href="#">PHP</ax/li> 

</ul> 
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Justified Nav Elements Example 


Home 


Home SVN iOS VB.Net Java 


Disabled Links 

For each of the .nav classes, if you add the .disabled class, it will create a gray 
link that also disables the :hover state as shown in the following example: 

<p>Disabled Link Example</p> 

<ul class="nav nav-pills"> 

<li class="active" ><a href="#" >Home</ax/li> 
clixa href="#">SVN</ax/li> 

<li class="disabled" xa href="#">iOS(disabled link) </ax/li> 

<lixa href="#">VB.Net</ax/li> 
clixa href ="#" >Davac/ax/li> 
clixa href="#">PHPc/ax/li> 
c/ul>cbr>cbr> 

cul class="nav nav-tabs"> 

cli class="active" >ca href="#" >Homec/a>c/li> 
cli>ca href="#">SVNc/a>c/li> 
cli>ca href ="#" >iOSc/a>c/li> 

cli class = "disabled" >ca href="#">VB.Net(disabled link) c/ax/li> 
cli>ca href="#" >Davac/ax/li> 
cli>ca href="#">PHPc/a>c/li> 
c/ul> 
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Disabled Link Example 



Home 


This class will only change the <a>'s appearance, not its functionality. Use 
custom JavaScript to disable links here. 

Dropdowns 

Navigation menus share a similar syntax with dropdown menus. By default, you 
have a list item that has an anchor working in conjunction with some data- 
attributes to trigger an unordered list with a .dropdown-menu class. 

Tabs with Dropdowns 

To add dropdowns to tab: 

• Start with a basic unordered list with the base class of .nav. 

• Add the class .nav-tabs. 

• Now add an unordered list with a .dropdown-menu class. 

<p>Tabs With Dropdown Example</p> 

<ul class="nav nav-tabs"> 

<li class="active" ><a href="#" >Home</ax/li> 
clixa href="#">SVN</ax/li> 
clixa href="#">iOS</ax/li> 

<lixa href="#" >VB. Net</ax/li> 

<li class="dropdown" > 

<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 

Java <span class="caret" x/span> 

</a> 

<ul class="dropdown-menu"> 

clixa href="#">Swing</ax/li> 
clixa href="#">jMeterc/ax/li> 



tutorialspoint 

MPLYEA3YLEARNING 
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<lixa href="#">EDB</ax/li> 

<li class = "dividen"x/li> 
clixa href="#">Sepanated link</ax/li> 
</ul> 

</li> 

clixa href="#" >PHP</ax/li> 

</ul> 


Tabs With Dropdown Example 

Home SVN iOS VB.Net 

Java » PHP 


Swing 

(Meter 

EJB 

Separated link 


Pills with Dropdowns 

To do the same thing with pills, simply swap the .nav-tabs class with .nav- 
pills as shown in the following example. 

<p>Pills With Dropdown Example</p> 

<ul class="nav nav-pills"> 

<li class="active" xa href="#" >Home</ax/li> 
clixa href="#">SVNc/a>c/li> 
clixa href="#">iOSc/ax/li> 
cli>ca href="#" >VB. Netc/ax/li> 
cli class="dropdown" > 

ca class="dropdown-toggle" data-toggle="dropdown" href="#"> 
lava cspan class="caret" >c/span> 
c/a> 

cul class="dropdown-menu"> 

cli>ca href="#">Swingc/a>c/li> 
clixa href="#">jMeterc/ax/li> 
cli>ca href="#">EDBc/a>c/li> 

tee 
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19. NAVBAR 


The navbar is one of the prominent features of Bootstrap sites. Navbars are 
responsive 'meta' components that serve as navigation headers for your 
application or site. Navbars collapse in mobile views and become horizontal as 
the available viewport width increases. At its core, the navbar includes styling 
for site names and basic navigation. 

[Default Navbar 

To create a default navbar: 

• Add the classes- .navbar, .navbar-default to the <nav> tag. 

• Add role="navigation" to the above element, to help with accessibility. 

• Add a header class .navbar-header to the <div> element. Include an 
<a> element with class navbar-brand. This will give the text a slightly 
larger size. 

• To add links to the navbar, simply add an unordered list with the classes 

of.nav, .navbar-nav. 

The following example demonstrates this: 

<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 

<div> 

<ul class="nav navbar-nav"> 

<li class = "active"xa href="#">iOS</ax/li> 
clixa href="#">SVN</ax/li> 

<li class="dropdown" > 

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Dava 

<b class = "caret"x/b> 

</a> 

<ul class="dropdown-menu"> 

<lixa href="#">jmeter</ax/li> 
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<lixa href="#">EDB</ax/li> 

<lixa href="#">Dasper Report</ax/li> 

<li class="dividen" x/li> 

<lixa href="#">Sepanated link</ax/li> 

<li class="dividen"x/li> 

<lixa href="#">One more separated link</ax/li> 
</ul> 

</li> 

</ul> 

</div> 

</nav> 


TutorialsPoint ios 


Responsive Navbar 

To add responsive features to the navbar, the content that you want to be 
collapsed needs to be wrapped in a <div> with classes- .collapse, .navbar- 
collapse. The collapsing nature is tripped by a button that has the class 
of .navbar-toggle and then features two data elements. The first, data-toggle, 
is used to tell the JavaScript what to do with the button, and the second, data- 
target, indicates which element to toggle. Then with a class- .icon-bar create 
what we like to call the hamburger button. This will toggle the elements that are 
in the .nav-collapse <div>. For this feature to work, you need to include 
theBootstrap Collapse Plugin. 

The following example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

cbutton type="button" class="navbar-toggle" data-toggle="collapse" 
data-target="#example-navbar-collapse"> 

<span class="sr-only">Toggle navigation</span> 

<span class = "icon-bar"x/span> 

<span class = "icon-bar"x/span> 

<span class = "icon-bar"x/span> 
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</button> 

<a class="navban-bnand" href="#" >TutorialsPoint</a> 

</div> 

<div class="collapse navbar-collapse" id="example-navbar-collapse"> 
<ul class="nav navban-nav"> 

<li class = "active"xa href="#">iOS</ax/li> 

<lixa href="#">SVN</ax/li> 

<li class="dropdown" > 

<a href="#" class="dnopdown-toggle" data-toggle="dropdown"> 
Dava <b class = "caret" x/b> 

</a> 

<ul class="dnopdown-menu"> 

<lixa href="#">jmeten</ax/li> 

<lixa href="#">EDB</ax/li> 

<lixa href="#">Dasper Report</ax/li> 

<li class="dividen" x/li> 

<lixa href="#">Separated link</ax/li> 

<li class="divider"x/li> 

<lixa href="#">One more separated link</ax/li> 

</ul > 

</li> 

</ul> 

</div> 

</nav> 
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Forms in Navbar 

Instead of using the default class-based forms from Chapter Bootstrap Forms, 
forms that are in the navbar, use the .navbar-form class. This ensures that the 
form's proper vertical alignment and collapsed behavior in narrow viewports. Use 
the alignment options (explained in Component alignment section) to decide 
where it resides within the navbar content. 

The following example demonstrates this: 

<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 

<div> 

<form class="navbar-form navbar-left" role="search"> 

<div class="form-group"> 

<input type="text" class="form-control" placeholder="Search"> 
</div> 

cbutton type="submit" class="btn btn-default">Submit</button> 
</form> 

</div> 

</nav> 


TutorialsPoint Submit 


Buttons in Navbar 

You can add buttons using class .navbar-btn to <button> elements not residing 
in a <form> to vertically center them in the navbar. .navbar-btn can be used 
on <a> and <input> elements. 

Do not use .navbar-btn nor the standard button classes on <a> elements within 

.navbar-nav. 

The following example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header" > 
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<a class="navbar-brand" href="#" >TutonialsPoint</a> 

</div> 

<div> 

<fonm class="navban-fonm navban-left" nole="seanch"> 

<div class="fonm-gnoup"> 

<input type="text" class="form-control" placeholder="Search"> 
</div> 

<button type="submit" class="btn btn-default" >Submit Button</button> 
</fonm> 

<button type="button" class="btn btn-default navban-btn"> 

Navban Button 
</button> 

</div> 

</nav> 



Text in Navbar 

To wrap strings of text in an element use the class .navbar-text. This is usually 
used with <p> tag for proper leading and color. The following example 
demonstrates this: 

<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 

<div> 

<p class="navbar-text" >Signed in as Thomas</p> 

</div> 

</nav> 
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T utorialsPoint Signed in as Thomas 


Non-nav Links 

If you want to use the standard links that are not within the regular navbar 
navigation component, then use the class navbar-link to add proper colors for 
the default and inverse navbar options as shown in the following example: 

<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 

<div> 

<p class="navbar-text navbar-right">Signed in as 
<a href="#" class="navbar-link">Thomas</a> 

</p> 

</div> 

</div> 


T UtorialsPoint &gned in as Thomai 


Component Alignment 

You can align the components like nav links, forms, buttons, or text to left or 
right in a navbar using the utility classes .navbar-left or .navbar-right. Both 
classes will add a CSS float in the specified direction. The following example 
demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 
</div> 

<div> 



107 


Bootstrap 


< ! --Left Align--> 

<ul class="nav navban-nav navban-left"> 

<li class="dnopdown" > 

<a hnef="#" class="dnopdown-toggle" data-toggle="dnopdown"> 
Dava 

<b class="canet" ></b> 

</a> 

<ul class="dropdown-menu"> 

<lixa href="#">jmeten</ax/li> 

<lixa href="#">EDBc/ax/li> 

clixa href="#">Dasper Reportc/ax/li> 

<li class="divider" x/li> 

clixa href="#">Separated link</ax/li> 

<li class="divider" x/li> 

clixa href="#">One more separated linkc/a>c/li> 
c/ul> 
c/li> 
c/ul> 

cform class="navbar-form navbar-left" role="search"> 
cbutton type="submit" class="btn btn-default"> 

Left align-Submit Button 
c/button> 
c/form> 

cp class="navbar-text navbar-left">Left align-Textc/p> 
c ! - -Right Align- - > 

cul class="nav navbar-nav navbar-right"> 
cli class="dropdown" > 

ca href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Dava cb class="caret" >c/b> 
c/a> 

cul class="dropdown-menu"> 

cli>ca href="#">jmeterc/a>c/li> 
cli>ca href="#">EDBc/a>c/li> 
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clixa href="#">Dasper Report</ax/li> 

<li class="divider"x/li> 

<lixa href="#">Separated link</ax/li> 

<li class="divider"x/li> 

<lixa href="#">One more separated link</ax/li> 
</ul > 

</li> 

</ul> 

<form class="navbar-form navbar-right" role="search" > 
<button type="submit" class="btn btn-default"> 

Right align-Submit Button 
</button> 

</form> 

<p class="navbar-text navbar-right">Right align-Text</p> 


</div> 

</nav> 




Tutonalspoint JM • e*gn Submit Button Left tfio^Teit 

AoHf «ngr-T«i» R«jhl aAgrvSubmt Button Jet* * 

Fixed to Top 



The Bootstrap navbar can be dynamic in its positioning. By default, it is a block- 
level element that takes its positioning based on its placement in the HTML. With 
a few helper classes, you can place it either on the top or bottom of the page, or 
you can make it scroll statically with the page. 

If you want the navbar fixed to the top, add class .navbar-fixed-top to 
the .navbar class. The following example demonstrates this: 

To prevent the navbar from sitting on top of other content in the body of the 
page, add at least 50 pixels of padding to the <body> tag or try your own 
values. 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 
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<div> 

<ul class="nav navban-nav"> 

<li class = "active"xa href="#">iOS</ax/li> 

<lixa href="#">SVN</ax/li> 

<li class="dnopdown" > 

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Dava <b class = "canet" x/b> 

</a> 

<ul class="dnopdown-menu"> 

<lixa href="#">jmeten</ax/li> 

<lixa href="#">EDB</ax/li> 

<lixa href="#">Dasper Report</ax/li> 

<li class="dividen"x/li> 

<lixa href="#">Separated link</ax/li> 

<li class="divider"x/li> 

<lixa href="#">One more separated link</ax/li> 

</ul > 

</li> 

</ul> 

</div> 

</nav> 


tonalsPoinl OS 


Fixed to Bottom 

If you want the navbar fixed to the bottom of the page, add class .navbar- 
fixed-bottom to the .navbar class. The following example demonstrates this: 


<nav class="navbar navbar-default navbar-fixed-bottom" 
role=" navigation "> 

<div class="navbar-header"> 

<a class="navbar-brand" href="#">TutorialsPoint</a> 
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</div> 

<div> 

<ul class="nav navbar-nav"> 

<li class="active"xa href="#">iOS</ax/li> 

<lixa href="#">SVN</ax/li> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dnopdown"> 
Dava <b class="canet"x/b> 

</a> 

<ul class="dnopdown-menu"> 

<lixa href="#">jmeten</ax/li> 

<lixa href="#">EDB</ax/li> 

<lixa href="#">Dasper Report</ax/li> 

<li class="dividen"x/li> 

<lixa href="#">Sepanated linl«/ax/li> 

<li class="dividen"x/li> 

<lixa hnef="#">One more separated link</ax/li> 

</ul> 

</li> 

</ul> 

</div> 

</nav> 


Static Top 

To create a navbar that scrolls with the page, add the .navbar-static-top class. 
This class does not require adding the padding to the <body>. 


<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
<div class="navbar-header" > 



111 


Bootstrap 


<a class="navbar-brand" href="#" >TutonialsPoint</a> 

</div> 

<div> 

<ul class="nav navban-nav"> 

<li class = "active"xa href="#">iOS</ax/li> 

<lixa href="#">SVN</ax/li> 

<li class="dropdown" > 

<a href="#" class="dnopdown-toggle" data-toggle="dropdown"> 
Dava <b class = "canet" x/b> 

</a> 

<ul class="dnopdown-menu"> 

<lixa href="#">jmeten</ax/li> 

<lixa href="#">EDB</ax/li> 

<lixa href="#">Dasper Report</ax/li> 

<li class="dividen"x/li> 

<lixa href="#">Separated link</ax/li> 

<li class="dividen" x/li> 

<lixa href="#">One more separated link</ax/li> 

</ul > 

</li> 

</ ul> 

</div> 

</nav> 


TutorialsPoint iOS SVN Java - 
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Inverted Navbar 

To create an inverted navbar with a black background and with white text, 
simply add the .navbar-inverse class to the .navbar class as demonstrated in 
the following example: 

To prevent the navbar from sitting on top of other content in the body of the 
page, add at least 50 pixels of padding to the <body> tag or try your own 
values. 

<nav class="navbar navbar-inverse" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 

<div> 

<ul class="nav navbar-nav"> 

<li class = "active"xa href="#">iOS</ax/li> 

<lixa href="#">SVN</ax/li> 

<li class="dropdown" > 

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Dava <b class = "caret" x/b> 

</a> 

<ul class="dropdown-menu"> 

<lixa href="#">jmeter</ax/li> 
clixa href="#">EDB</ax/li> 

<lixa href="#">Dasper Report</ax/li> 

<li class="divider"x/li> 

<lixa href="#">Separated link</ax/li> 

<li class="divider"x/li> 

<lixa href="#">One more separated link</ax/li> 

</ul> 

</li> 

</ul> 

</div> 

</nav> 
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20. BREADCRUMB 


Breadcrumbs are a great way to show hierarchy-based information for a site. In 
the case of blogs, breadcrumbs can show the dates of publishing, categories, or 
tags. They indicate the current page's location within a navigational hierarchy. 

A breadcrumb in Bootstrap is simply an unordered list with a class 
of .breadcrumb. The separator is automatically added by CSS 
(bootstrap. min. css) through the following class: 

.breadcrumb > li + li: before { 
color: #CCCCCC; 
content: "/ 
padding: 0 5px; 

} 

The following example demonstrates breadcrumbs: 

<ol class="breadcrumb"> 

<lixa href="#">Home</ax/li> 

<lixa href="#">2013</ax/li> 

<li class=" active" >November</li> 

</ol> 


201 
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21. PAGINATION 


This chapter discusses about the pagination feature that Bootstrap supports. 
Pagination, an unordered list is handled by Bootstrap like a lot of other interface 
elements. 

Pagination 


The following table lists the classes that Bootstrap provides to handle pagination. 


Class 

Description 

Sample code 

.pagination 

Add this class to get the 

<ul class="pagination"> 


pagination on your page. 

clixa href="#" >&laquo; </ax/li> 

clixa href="#">l</ax/li> 

</ul> 

.disabled, 

You can customize links 

<ul class="pagination"> 

.active 

by using .disabled for 
unclickable links and 
.active to indicate the 

<li class="disabled"xa 
href ="#" >&laquo; </ax/li> 


current page. 

<li class="active"xa 
href ="#" >l<span class="sr- 
only">(cunrent)</spanx/ax/li> 

</ul> 

.pagination- 

Use these classes to get 

<ul class="pagination pagination- 

ig, 

different size items. 

lg" >. . . </ul> 

.pagination- 

sm 


<ul class="pagination">. . .</ul> 

<ul class="pagination pagination- 
sm">. . .</ul> 


Default Pagination 

The following example demonstrates the use of class .pagination discussed in 
the above table: 
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Slates 

The following example demonstrates the use of class .disabled, 
.active discussed in the above table: 


<ul class="pagination"> 

<lixa href="#">&laquo; </ax/li> 

<li class = "active" xa href="#">l</ax/li> 
<li class = "disabled"xa href="#">2</ax/li> 
<lixa href="#">3</ax/li> 

<lixa href="#">4</ax/li> 

<lixa href="#">5</ax/li> 

<lixa href="#">&raquoj </ax/li> 

</ul> 



Sizing 

The following example demonstrates the use of classes for sizing, .pagination- 
* discussed in the above table: 
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<ul class="pagination pagination-lg"> 
<lixa href="#">&laquo; </ax/li> 
<lixa href="#">l</ax/li> 

<lixa href="#">2</ax/li> 

<lixa href="#">3</ax/li> 

<lixa href="#">4</ax/li> 

<lixa href="#">5</ax/li> 

<lixa href="#">&raquoj </ax/li> 
</ulxbr> 

<ul class="pagination"> 

<lixa href="#">&laquo; </ax/li> 
<lixa href="#">l</ax/li> 

<lixa href="#">2</ax/li> 

<lixa href="#">3</ax/li> 

<lixa href="#">4</ax/li> 

<lixa href="#">5</ax/li> 

<lixa href="#">&raquoj </ax/li> 
</ulxbr> 

<ul class="pagination pagination-sm"> 
<lixa href="#">&laquo; </ax/li> 
<lixa href="#">l</ax/li> 

<lixa href="#">2</ax/li> 

<lixa href="#">3</ax/li> 

<lixa href="#">4</ax/li> 

<lixa href="#">5</ax/li> 

<lixa href="#">&naquo; </ax/li> 
</ul> 
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Pager 

If you need to create simple pagination links that go beyond text, the pager can 
work quite well. Like the pagination links, the pager is an unordered list. By 
default the links are centered. The following table lists the classes Bootstrap 
provides for pager. 


Class 

Description 

Sample code 

.pager 

Add this class to get the 
pager links. 

<ui class="pager"> 

clixa hnef="#" >Previous</ax/li> 

clixa hnef="#">Next</ax/li> 

</ul > 

.previous, 

.next 

Use class .previous to left 
align and .next to right-align 
the links. 

<ui class="pager"> 

<li class="previous"xa 
href ="#" >&lann; 01den</ax/li> 

<li class="next"xa 
href ="#" >Newen &nann;</ax/li> 

</ul > 

.disabled 

Add this class to get a muted 
look. 

<ui class="pager"> 

<li class="previous 
disablecT'xa href="#">&larr; 
01den</ax/li> 

<li class="next"xa 
href ="#" >Newen &nann;</ax/li> 

</ul> 


Default Pager 

The following example demonstrates the use of class .pager discussed in the 
above table: 

<ul class="pager"> 

<lixa href="#">Previous</ax/li> 

<lixa href="#">Next</ax/li> 

</ul> 
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Aligned Links 

The following example demonstrates the use of classes for 
alignment, .previous, .next discussed in the above table: 

<ul class="pager"> 

<li class = "previous"xa href="#">&larr; 01der</ax/li> 

<li class = "next"xa href="#">Newer Srarr; </ax/li> 

</ul> 


- Older 


Slates 

The following example demonstrates the use of class .disabled discussed in the 
above table: 

<ul class="pager"> 

<li class = "previous disabled" xa href="#" >&larr; 01der</ax/li> 

<li class="next"xa href="#">Newer Srarr; </ax/li> 

</ul> 
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22. LABELS 


This chapter covers Bootstrap labels. Labels are great for offering counts, tips, or 
other markup for pages. Use class .label to display labels as shown in the 
following example: 

<hl>Example Heading <span class="label label-default" >Label</spanx/hl> 
<h2>Example Heading <span class="label label-default" >Label</spanx/h2> 
<h3>Example Heading <span class="label label-default" >Label</spanx/h3> 
<h4>Example Heading <span class="label label-default" >Label</spanx/h4> 


Example Heading 

Example Heading 


Example Heading [ 


Example Heading 



You can modify the appearance of the labels using the modifier classes such 

as, label-default, label-primary, label-success, label-info, label-warning, 
label-danger as shown in the following example: 

<span class="label label-default" >Default Label</span> 

<span class="label label-primary" >Primary Label</span> 

<span class="label label-success" >Success Label</span> 

<span class="label label-info">Info Label</span> 

<span class="label label-warning" >Warning Label</span> 

<span class="label label-danger">Danger Label</span> 
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23. BADGES 


This chapter will discuss about Bootstrap badges. Badges are similar to labels; 
the primary difference is that the corners are more rounded. 

Badges are mainly used to highlight new or unread items. To use badges just 
add <span class="badge"> to links, Bootstrap navs, and more. 

The following example demonstrates this: 



When there are no new or unread items, badges will simply collapse via 
CSS's :empty selector, provided no content exists within. 

Active Nav States 

You can place badges in active states of pill and list navigations. You can achieve 
this by placing <span class= "badge" > to active links, as demonstrated in the 
following example: 

<h4>Example for Active State in Pill </h4> 

<ul class="nav nav-pills"> 

<li class="active"xa href="#" >Home <span class="badge" >42</spanx/ax/li> 
clixa href="#" >Prof ile</ax/li> 

clixa href="#">Messages <span class="badge">3</spanx/ax/li> 

</ul> 

<br> 

<h4>Example for Active State in navigations</h4> 

<ul class="nav nav-pills nav-stacked" style="max-width : 260px;"> 

<li class="active" > 

<a href="#"> 

<span class="badge pull-right">42</span> 

Home 

</a> 
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</li> 

<lixa href="#">Profile</ax/li> 
<li> 

<a href="#"> 


<span class="badge pull-night">3</span> 
Messages 
</a> 

</li> 

< / u 1 > 


Example for Active State in Pill 



o 
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24. JUMBOTRON 


This chapter will discuss one more feature that Bootstrap supports, the 
Jumbotron. As the name suggest this component can optionally increase the size 
of headings and add a lot of margin for landing page content. To use the 
Jumbotron: 

• Create a container <div> with the class of .jumbotron. 

• In addition to a larger <hl>, the font-weight is reduced to 200px. 

The following example demonstrates this: 

<div class="container"> 

<div class=" jumbotron" > 

<hl>Welcome to landing page!</hl> 

<p>This is an example for jumbotron . </p> 

<pxa class="btn btn-primary btn-lg" role="button"> 

Learn more</a> 

</p> 

</div> 

</div> 


Welcome to landing 
page! 

This is an example for jumbotron. 


Leam more 


To get a jumbotron of full width, and without rounded corners use 
the .jumbotron class outside all .container classes and instead add 
a .container within, as shown in the following example: 
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<div class=" jumbotnon"> 

<div class="container" > 

<hl>Welcome to landing page!</hl> 

<p>This is an example for jumbotron . </p> 

<pxa class="btn btn-primany btn-lg" nole="button"> 
Learn more</a> 

</p> 

</div> 

</div> 


Welcome to landing 
page! 

This is an example for jumbotron. 


Learn more 
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25. PAGE HEADER 


The page header is a nice little feature to add appropriate spacing around the 
headings on a page. This is particularly helpful on a web page where you may 
have several post titles and need a way to add distinction to each of them. To 
use a page header, wrap your heading in a <div> with a class of .page-header: 
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26. THUMBNAILS 


This chapter discusses about Bootstrap thumbnails. A lot of sites need a way to 
lay out images, videos, text, etc., in a grid, and Bootstrap has an easy way to do 
this with thumbnails. To create thumbnails using Bootstrap: 

• Add an <a> tag with the class of .thumbnail around an image. 

• This adds four pixels of padding and a gray border. 

• On hover, an animated glow outlines the image. 

The following example demonstrates a default thumbnail: 


<div class="row"> 

<div class="col-sm-6 col-md-3"> 

<a href="#" class="thumbnail"> 

<img src="/ boot st rap/ images/ kittens .jpg" 
alt="Generic placeholder thumbnail"> 

</a> 

</div> 

<div class="col-sm-6 col-md-3"> 

<a href="#" class="thumbnail"> 

<img src="/ boot st rap/ images /kittens .jpg" 
alt="Generic placeholder thumbnail"> 

</a> 

</div> 

<div class="col-sm-6 col-md-3"> 

<a href="#" class="thumbnail"> 

<img src="/ boot strap/ images/ kittens .jpg" 
alt="Generic placeholder thumbnail"> 

</a> 

</div> 

<div class="col-sm-6 col-md-3"> 

<a href="#" class="thumbnail"> 

<img src="/ boot strap/ images/ kittens .jpg" 
alt="Generic placeholder thumbnail"> 
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</a> 

</div> 

</div> 



Adding Custom Content 

Now that we have a basic thumbnail, it's possible to add any kind of HTML 
content like headings, paragraphs, or buttons into thumbnails. Follow the steps 
below: 

• Change the <a> tag that has a class of .thumbnail to a <div>. 

• Inside of that <div>, you can add anything you need. As this is a <div>, 
we can use the default span-based naming convention for sizing. 

• If you want to group multiple images, place them in an unordered list, and 
each list item will be floated to the left. 

The following example demonstrates this: 

<div class="row"> 

<div class="col-sm-6 col-md-3"> 

<div class="thumbnail" > 

<img src="/ boot st rap/ images/ kittens .jpg" 
alt="Generic placeholder thumbnail"> 

</div> 

<div class="caption"> 

<h3>Thumbnail label</h3> 

<p>Some sample text. Some sample text.</p> 

<P> 

<a href="#" class="btn btn-primary" role="button"> 

Button 

</a> 

<a href="#" class="btn btn-default" role="button"> 

Button 
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</a> 

</p> 

</div> 

</div> 

<div class="col-sm-6 col-md-3"> 

<div class="thumbnail" > 

<img snc="/ boot st nap/ images/ kittens .jpg" 
alt="Generic placeholder thumbnail"> 

</div> 

<div class="caption"> 

<h3>Thumbnail label</h3> 

<p>Some sample text. Some sample text.</p> 

<P> 

<a href="#" class="btn btn-primary" role="button"> 
Button 
</a> 

<a href="#" class="btn btn-default" role="button"> 
Button 
</a> 

</p> 

</div> 

</div> 

<div class="col-sm-6 col-md-3"> 

<div class="thumbnail" > 

<img src="/ boot st rap/ images/ kittens .jpg" 
alt="Generic placeholder thumbnail"> 

</div> 

<div class="caption"> 

<h3>Thumbnail label</h3> 

<p>Some sample text. Some sample text.</p> 

<P> 

<a href="#" class="btn btn-primary" role="button"> 
Button 
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</a> 

<a href="#" class="btn btn-default" role="button"> 
Button 
</a> 

</p> 

</div> 

</div> 

<div class="col-sm-6 col-md-3"> 

<div class="thumbnail"> 

<img snc="/ boot st rap/ images/ kittens .jpg" 
alt="Generic placeholder thumbnail"> 

</div> 

<div class="caption"> 

<h3>Thumbnail label</h3> 

<p>Some sample text. Some sample text.</p> 

<P> 

<a href="#" class="btn btn-primary" role="button"> 
Button 
</a> 

<a href="#" class="btn btn-default" role="button"> 
Button 
</a> 

</p> 

</div> 

</div> 

</div> 



Thumbnail label Thumbnail label Thumbnail label Thumbnail label 

Scm# Ib»I Some vjmpto toxt. Sorm Mniple teat Som« tarr^to tart Som« wmpw tost Some aampto tart Some tort Sor*to wmpt* toil 

| Butter. Butter. Butter. E^rton 
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27. ALERTS 


This chapter will discuss about alerts and the classes Bootstrap provides for 
alerts. Alerts provide a way to style messages to the user. They provide 
contextual feedback messages for typical user actions. 

You can add an optional close icon to alert. For inline dismissal use the Alerts 
jQuery plugin. 

You can add a basic alert by creating a wrapper <div> and adding a class 
of .alert and one of the four contextual classes (e.g., .alert-success, .alert- 
info, .alert-warning, .alert-danger). The following example demonstrates 
this: 


<div class="alert alert-success">Success ! Well done its submitted . </div> 
<div class="alert alert-info">Info! take this info.</div> 

<div class="alert alert-warning">Warning ! Dont submit this.</div> 

<div class="alert alert-danger" >Error ! Change few things . </div> 



Dismissal Alerts 

To build a dismissal alert: 

• Add a basic alert by creating a wrapper <div> and adding a class 
of .alert and one of the four contextual classes (e.g., .alert-success, 
.alert-info, .alert-warning, .alert-danger) 

• Also add optional .alert-dismissable to the above <div> class. 

• Add a close button. 
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The following example demonstrates this: 

<div class="alert alert-success alert-dismissable" > 

cbutton type="button" class="close" data-dismiss="alert" 
aria -hidden= "true "> 

Stimes; 

</button> 

Success! Well done its submitted. 

</div> 

<div class="alert alert-info alert-dismissable"> 

<button type="button" class="close" data-dismiss="alert" 
aria -hidden= "true "> 

Stimes; 

</button> 

Info! take this info. 

</div> 

<div class="alert alert-warning alert-dismissable"> 

<button type="button" class="close" data-dismiss="alert" 
aria -hidden= "true "> 

Stimes; 

</button> 

Warning ! Dont submit this. 

</div> 

<div class="alert alert-danger alert-dismissable" > 

cbutton type="button" class="close" data-dismiss="alert" 
aria -hidden= "true "> 

Stimes; 

</button> 

Error ! Change few things. 

</div> 

Be sure to use the <button> element with the data-dismiss-”alert'' data 
attribute. 
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Links in Alerts 

To get links in alerts: 

• Add a basic alert by creating a wrapper <div> and adding a class 
of .alert and one of the four contextual classes (e.g., .alert-success, 
.alert-info, .alert-warning, .alert-danger) 

• Use the .alert-link utility class to quickly provide matching colored links 
within any alert. 

<div class="alert alert-success" > 

<a href="#" class="alert-link">Success ! Well done its 
submitted . </a> 

</div> 

<div class="alert alert-info"> 

<a href="#" class="alert-link">Info! take this info.</a> 

</div> 

<div class="alert alert-warning" > 

<a href="#" class="alert-link">Warning ! Dont submit this.</a> 
</div> 

<div class="alert alert-danger" > 

<a href="#" class="alert-link">Error ! Change few things. </a> 
</div> 
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28. PROGRESS BARS 


This chapter discusses about Bootstrap progress bars. The purpose of progress 
bars is to show that assets are loading, in progress, or that there is action taking 
place regarding elements on the page. 

Progress bars use CSS3 transitions and animations to achieve some of their 
effects. These features are not supported in Internet Explorer 9 and below or 
older versions of Firefox. Opera 12 does not support animations. 

Default Progress Bar 

To create a basic progress bar: 

1. Add a <div> with a class of .progress. 

2. Next, inside the above <div>, add an empty <div> with a class 

of .progress-bar. 

3. Add a style attribute with the width expressed as a percentage. Say for 
example, style="60%"; indicates that the progress bar was at 60%. 

Let us see an example below: 

<div class="progress" > 

<div class="progress-bar" role="progressbar" aria-valuenow="60" 
aria-valuemin="0" aria-valuemax="100" style="width : 40%; "> 

<span class="sr-only">40% Complete</span> 

</div> 

</div> 



Alternate Progress Bar 

To create a progress bar with different styles: 

1. Add a <div> with a class of .progress. 

2. Next, inside the above <div>, add an empty <div> with a class 

of .progress-bar and class progress-bar-* where * could be success, 
info, warning, danger. 
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3. Add a style attribute with the width expressed as a percentage. Say for 
example, style="60%"; indicates that the progress bar was at 60%. 

Let us see an example below: 

<div class="progress" > 

<div class="progress-bar progress-bar-success" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 90%; "> 

<span class="sr-only">90% Complete (Sucess) </span> 

</div> 

</div> 

<div class="progress" > 

<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 30%; "> 

<span class="sr-only">30% Complete (info)</span> 

</div> 

</div> 

<div class="progress" > 

<div class="progress-bar progress-bar-warning" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 20%; "> 

<span class="sr-only">20%Complete (warning) </span> 

</div> 

</div> 

<div class="progress" > 

<div class="progress-bar progress-bar-danger" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 10%; "> 

<span class="sr-only">10% Complete (danger) </span> 

</div> 

</div> 
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Striped Progress Bar 

To create a striped progress bar: 

1. Add a <div> with a class of .progress and .progress-striped. 

2. Next, inside the above <div>, add an empty <div> with a class 

of .progress-bar and class progress-bar-* where * could be success, 
info, warning, danger. 

3. Add a style attribute with the width expressed as a percentage. Say for 
example, style="60%"; indicates that the progress bar was at 60%. 

Let us see an example below: 

<div class="progress progress-striped"> 

<div class="progress-bar progress-bar-success" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 90%; "> 

<span class="sr-only">90% Complete (Sucess) </span> 

</div> 

</div> 

<div class="progress progress-striped"> 

<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 30%; "> 

<span class="sr-only">30% Complete (info)</span> 

</div> 

</div> 

<div class="progress progress-striped"> 

<div class="progress-bar progress-bar-warning" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 20%; "> 
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<span class="sr-only">20%Complete (warning) </span> 

</div> 

</div> 

<div class="progress progress-striped"> 

<div class="progress-bar progress-bar-danger" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 10%; "> 

<span class="sr-only">10% Complete (danger) </span> 

</div> 

</div> 



Animated Progress Bar 

To create an animated progress bar: 

1. Add a <div> with a class of .progress and .progress-striped. Also add 
class .activeto .progress-striped. 

2. Next, inside the above <div>, add an empty <div> with a class 

of .progress-bar. 

3. Add a style attribute with the width expressed as a percentage. Say for 
example, style="60%"; indicates that the progress bar was at 60%. 

This will animate the stripes right to left. 

Let us see an example below: 

<div class="progress progress-striped active"> 

<div class="progress-bar progress-bar-success" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 40%; "> 

<span class="sr-only">40% Complete</span> 

</div> 
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Stacked Progress Bar 

You can even stack multiple progress bars. Place the multiple progress bars into 
the same .progress to stack them as seen in the following example: 

<div class="progress" > 

<div class="progress-bar progress-bar-success" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 40%; "> 

<span class="sr-only">40% Complete</span> 

</div> 

<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 30%; "> 

<span class="sr-only">30% Complete (info)</span> 

</div> 

<div class="progress-bar progress-bar-warning" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width : 20%; "> 

<span class="sr-only">20%Complete (warning) </span> 

</div> 

</div> 
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This chapter discusses about Media object. These are abstract object styles for 
building various types of components (like blog comments, Tweets, etc.) that 
feature a left-aligned or right-aligned image alongside the textual content. The 
goal of the media object is to make the code for developing these blocks of 
information drastically shorter. 

The goal of media objects (light markup, easy extendability) is achieved by 
applying classes to some of the simple markup. There are two forms to the 
media object: 

• .media: This class allows to float a media object (images, video, and 
audio) to the left or right of a content block. 

• .media-list: If you are preparing a list where the items will be part of an 
unordered list, use a class useful for comment threads or articles lists. 

Let us see an example below of default media object: 


<div class="media" > 

<a class="pull-left" href="#"> 

<img class="media-object" src="/bootstrap/images/64. jpg" 
alt="Media Object"> 


</a> 


<div class="media-body"> 

<h4 class = "media-heading">l v ledia heading</h4> 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

</div> 

</div> 

<div class="media" > 

<a class="pull-left" href="#"> 

<img class="media-object" src="/bootstrap/images/64. jpg" 
alt="Media Object"> 


</a> 
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<div class="media-body"> 

<h4 class="media-heading">Media heading</h4> 


This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 

This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 

This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 

This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 


<div class="media" > 


<a class="pull-left" href="#"> 

<img class="media-object" snc="/bootstnap/images/64. jpg" 
alt="l v ledia Object"> 

</a> 

<div class="media-body"> 

<h4 class="media-heading">Media heading</h4> 


This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 

This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 

This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 

This 

is 

some 

sample 

text . 

This 

is 

some 

sample 

text 


</div> 

</div> 

</div> 

</div> 



Media heading 

This ts some sample text. This is some sample text This is some sample text This is some sample text. This 
is some sample text This is some sample text This is some sample text. This is some sample text. 

Media heading 

This is some sample text. This is some sample text This « some sample text This is some sample text This 
is some sample text This is some sample text This is some sample text This is some sample text. 


H Media heading 

This is some sample text This is some sample text This is some sample text This is some 
sample text.This is some sample text. This is some sample text This is some sample text. This is 
some sample text. 


Let us see an example of media list: 


<ul class="media-list"> 

<li class="media"> 

<a class="pull-left" href="#"> 
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<img class="media-object" snc="/bootstnap/images/64. jpg" 
alt="Generic placeholder image"> 

</a> 

<div class="media-body"> 

<h4 class="media-heading">Media heading</h4> 


<p>This is some sample text. This is 

some sample text. 

This is some sample text. This is 

some sample text. 

This is some sample text. This is 

some sample text. 

This is some sample text. This is 

<!-- Nested media object --> 

<div class="media"> 

<a class="pull-left" href="#"> 

some sample text.</p> 


<img class="media-object" src="/bootstrap/images/64. jpg" 
alt="Generic placeholder image"> 

</a> 

<div class="media-body"> 

<h4 class="media-heading">Nested media heading</h4> 


This is some sample text. This 

is some sample text. 

This is some sample text. This 

is some sample text. 

This is some sample text. This 

is some sample text. 

This is some sample text. This 

<!-- Nested media object --> 

<div class="media" > 

is some sample text. 


<a class="pull-left" href="#"> 

<img class="media-object" src="/bootstrap/images/64. jpg” 


alt="Generic placeholder 

</a> 

<div class="media-body"> 

image"> 


<h4 class="media-heading">Nested media heading</h4> 


This is some sample text 

This is some sample text. 

This is some sample text 

This is some sample text. 

This is some sample text 

This is some sample text. 

This is some sample text 

</div> 

This is some sample text. 

1 A1 

/ykrtjStutorials point 
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</div> 

</div> 

</div> 

<!-- Nested media object --> 

<div class="media"> 

<a class="pull-left" href="#"> 

<img class="media-object" snc="/bootstnap/images/64. jpg" 
alt="Generic placeholder image"> 

</a> 

<div class="media-body"> 

<h4 class="media-heading">Nested media heading</h4> 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

</div> 

</div> 

</div> 

</li> 

<li class="media"> 


<a class="pull-right" href="#"> 

<img class="media-object" src="/bootstrap/images/64. jpg" 
alt="Generic placeholder image" > 

</a> 

<div class="media-body"> 

<h4 class="media-heading">l v ledia heading</h4> 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

This is some sample text. This is some sample text. 

</div> 

</li> 

</ul> 
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Media heading 

This is some sample text. Th«s ts some sample text. This Is some sample text This Is some sample text This is 
some sample text. This is some sample text. This is some sample text. This Is some sample text 



Nested media heading 

This is some sample text. This is some sample text. This is some sample text This is some sample 
text.This is some sample text This is some sample text. This is some sample text. This is some 
sample text 



Nested media heading 

This is some sample text. This is some sample text. This is some sample text. This is 
some sample text.This is some sample text. This is some sample text This is some 
sample text. This is some sample text. 


H Nested media heading 

This is some sample text. This is some sample text This is some sample text This e some sample 
text.This Is some sample text. This is some sample text This is some sample text This a some 
sample text. 


Media heading 

This is some sample text This is some sample text This * some sample text. This is some sample text.This Is 
some sample text. This is some sample text This a some sample text. This is some sample text. 
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30. LIST GROUP 


The purpose of list group component is to render complex and customized 
content in lists. To get a basic list group: 

• Add the class .list-group to element <ul>. 

• Add class .list-group-item to <li>. 

The following example demonstrates this: 

<ul class="list-group"> 

<li class="list-group-item">Free Domain Name Registration</li> 

<li class="list-group-item">Free Window Space hosting</li> 

<li class="list-group-item">Number of Images</li> 

<li class="list-group-item">24*7 support</li> 

<li class="list-group-item">Renewal cost per year</li> 

</ul> 


Free Domain Name Registration 
Free Window Space hosting 
Number of Images 
24*7 support 
Renewal cost per year 


Adding Badges to List Group 

We can add the badges component to any list group item and it will 
automatically be positioned on the right. Just add <span 
class="badge"> within the <li> element. The following example demonstrates 
this: 


<ul class="list-group"> 

<li class="list-group-item">Free Domain Name Registration</li> 
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<li class="list-group-item">Free Window Space hosting</li> 
<li class="list-gnoup-item">Numben of Images</li> 

<li class="list-group-item"> 

<span class="badge" >New</span> 

24*7 support 
</li> 

<li class="list-group-item">Renewal cost per year</li> 

<li class="list-group-item"> 

<span class="badge" >New</span> 

Disocunt Offer 
</li> 

</ul> 


Free Domain Name Registration 


Free Window Space hosting 


Number of Images 


24*7 support 

C3> 

Renewal cost per year 



Disocunt Offer 


Linking List Group Items 

By using the anchor tags instead of list items, we can link the list groups. We 
need to use <div> instead of <ul> element. The following example 
demonstrates this: 


<a href="#" class="list-group-item active"> 

Free Domain Name Registration 
</a> 

<a href="#" class="list-group-item">24*7 support</a> 

<a href="#" class="list-group-item">Free Window Space hosting</a> 

<a href="#" class="list-group-item">Number of Images</a> 
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Add Custom Content to List Group 

We can add any HTML content to the above linked list groups. The following 
example demonstrates this: 

<div class="list-group" > 

<a href="#" class="list-group-item active"> 

<h4 class=" list -group- item- heading" > 

Starter Website Package 
</h4> 

</a> 

<a href="#" class="list-group-item"> 

<h4 class=" list -group- item- heading" > 

Free Domain Name Registration 
</h4> 

<p class=" list -group- item- text "> 

You will get a free domain registration with website pages. 

</p> 

</a> 

<a href="#" class="list-group-item"> 

<h4 class=" list -group- item- heading" > 

24*7 support 
</h4> 

<p class=" list -group- item- text "> 
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We provide 24*7 support. 

</p> 

</a> 

</div> 

<div class="list-group" > 

<a href="#" class="list-group-item active"> 

<h4 class=" list -group- item- heading" > 

Business Website Package 
</h4> 

</a> 

<a href="#" class="list-group-item"> 

<h4 class=" list -group- item- heading" > 

Free Domain Name Registration 
</h4> 

<p class=" list -group- item- text "> 

You will get a free domain registration with website pages. 
</p> 

</a> 

<a href="#" class="list-group-item"> 

<h4 class="list-group-item-heading">24*7 support</h4> 

<p class="list-group-item-text">We provide 24*7 support. </p> 
</a> 

</div> 


Starter Website Package 


Free Domain Name Registration 

You will get a free domain nae registration with website pages. 

24*7 support 

We provide 24*7 support. 


Business Website Package 


Free Domain Name Registration 

You will get a free domain nae registration with website pages. 

24*7 support 

We provide 24*7 support. 
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31. PANELS 


This chapter will discuss about Bootstrap panels. Panel components are used 
when you want to put your DOM component in a box. To get a basic panel, just 
add class .panel to the <div> element. Also add class .panel-default to this 
element as shown in the following example: 



Panel with Heading 


There are two ways to add panel heading: 

• Use .panel-heading class to easily add a heading 
panel. 

• Use any <hl>-<h6> with a .panel-title class to 
heading. 

The following example demonstrates both the ways: 

container to your 

add a pre-styled 

<div class="panel panel-default"> 


<div class="panel-heading" > 


Panel heading without title 


</div> 


<div class="panel-body"> 


Panel content 


</div> 


</div> 
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Panel with Footer 


You can add footers to panels, by wrapping buttons or secondary text in a <div> 
containing class .panel-footer. The following example demonstrates this. 


<div class="panel panel-default"> 

<div class="panel-body"> 

This is a Basic panel 
</div> 

<div class="panel-footer" >Panel footer</div> 
</div> 


This is a Basic panel 


Panel footer 
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Panel footers do not inherit colors and borders when using contextual variations 
as they are not meant to be in the foreground. 


Panel Contextual Alternatives 


Use contextual state classes such as, panel-primary, panel-success, panel- 
info, panel-warning, panel-danger, to make a panel more meaningful to a 
particular context. 

<div class="panel panel-primary"> 

<div class="panel-heading" > 

<h3 class="panel-title">Panel title</h3> 

</div> 

<div class="panel-body"> 

This is a Basic panel 
</div> 

</div> 

<div class="panel panel-success"> 

<div class="panel-heading" > 

<h3 class="panel-title">Panel title</h3> 

</div> 

<div class="panel-body"> 

This is a Basic panel 
</div> 

</div> 

<div class="panel panel-info"> 

<div class="panel-heading" > 

<h3 class="panel-title">Panel title</h3> 

</div> 

<div class="panel-body"> 

This is a Basic panel 
</div> 

</div> 

<div class="panel panel-warning"> 

<div class="panel-heading" > 

<h3 class="panel-title">Panel title</h3> 
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</div> 

<div class="panel-body"> 

This is a Basic panel 
</div> 

</div> 

<div class="panel panel-danger" > 

<div class="panel-heading" > 

<h3 class="panel-title">Panel title</h3> 
</div> 

<div class="panel-body"> 

This is a Basic panel 
</div> 

</div> 


Panel title 


This is a Basic panel 

This is a Base panel 

Panel tftle 

This is a Basic panel 

This is a Base panel 

This is a Base panel 


Panel with Tables 

To get a non-bordered table within a panel, use the class .table within the panel. 
Suppose there is a <div> containing .panel-body, we add an extra border to 
the top of the table for separation. If there is no <div> containing .panel-body, 
then the component moves from panel header to table without interruption. 

The following example demonstrates this: 
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<div class="panel panel-default"> 

<div class="panel-heading" > 

<h3 class="panel-title">Panel title</h3> 
</div> 

<div class="panel-body"> 

This is a Basic panel 
</div> 

<table class="table" > 

<th>Product</thxth>Price </th> 

<tnxtd> Product A</tdxtd>200</tdx/tr> 
<trxtd>Product B</tdxtd>400</tdx/tr> 
</table> 

</div> 

<div class="panel panel-default"> 

<div class="panel-heading" >Panel Heading</div> 
ctable class="table" > 

<th>Product</thxth>Price </th> 
<trxtd>Product A</tdxtd>200</tdx/tr> 
<trxtd>Product B</tdxtd>400</tdx/tr> 
</table> 

</div> 


Panel title 


This is a Basic panel 


Product 

Price 

Product A 

200 

Product B 

400 

Panel Heading 

Product 

Price 

Product A 

200 

Product B 

400 
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Panel with Listgroups 

You can include list groups within any panel. Create a panel by adding 
class .panel to the <div> element. Also add class .panel-default to this 
element. Now within this panel include your list groups. You can learn to create 
a list group from chapter List Groups. 

<div class="panel panel-default"> 

<div class="panel-heading" >Panel heading</div> 

<div class="panel-body"> 

<p>This is a Basic panel content. This is a Basic panel content. 
This is a Basic panel content. This is a Basic panel content. 

This is a Basic panel content. This is a Basic panel content. 

This is a Basic panel content. 

</p> 

</div> 

<ul class="list-group"> 

<li class="list-group-item">Free Domain Name Registration</li> 

<li class="list-group-item">Free Window Space hosting</li> 

<li class="list-group-item">Number of Images</li> 

<li class="list-group-item">24*7 support</li> 

<li class="list-group-item">Renewal cost per year</li> 

</ul> 

</div> 


Panel heading 

This is a Base panel content This « a Basic panel content. This is a Basic panel content This is a Base panel content. This is a 
Basic panel content.This is a Basic panel content This is a Basic panel content 

Free Domain Name Registration 
Free Window Space hosting 
Number ol Images 
24*7 support 
Renewal cost pet year 
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32. WELLS 


A well is a container in <div> that causes the content to appear sunken or an 
inset effect on the page. To create a well, simply wrap the content that you 
would like to appear in the well with a <div> containing the class of .well. The 
following example shows a default well: 



Sizing 

You can change the size of well using the optional classes such as, well- 
Igorwell-lg. These classes are used in conjunction with .well class. These 
affect the padding, making the well larger or smaller depending on the class. 

<div class="well well-lg">Hij am in large well !!</div> 

<div class="well well-sm">Hi, am in small well !!</div> 
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33. PLUGINS OVERVIEW 


The components discussed in the previous chapters under Layout 
Components are just the beginning. Bootstrap comes bundled with 12 jQuery 
plugins that extend the features and can add more interaction to your site. To 
get started with the Bootstrap's JavaScript plugins, you don't need to be an 
advanced JavaScript developer. By utilizing Bootstrap Data API, most of the 
plugins can be triggered without writing a single line of code. 

Bootstrap Plugins can be included on your site in two forms: 

• Individually: Using Bootstrap's individual *.js files. Some plugins and 
CSS components depend on other plugins. If you include plugins 
individually, make sure to check for these dependencies in the docs. 

• Or compiled (all at once): Using bootstrap.js or the minified 
bootstrap, min. js. 

Do not attempt to include both, as both bootstrap.js and bootstrap. min. js contain 
all plugins in a single file. 

All plugins depend on jQuery. So jQuery must be included before the plugin files. 
Check bower.json to see which versions of jQuery are supported. 

Data Attributes 

• All of the Bootstrap plugins are accessible using the included Data API. 
Hence, you don't need to include a single line of JavaScript to invoke any 
of the plugin features. 

• In some situations it may be desirable to turn this functionality of Data 
API off. If you need to turn off the Data API, you can unbind the attributes 
by adding the following line of JavaScript: 


$ (document) .off ( 1 .data-api 1 ) 


• To turn off a specific/single plugin, just include the plugin's name as a 
namespace along with the data-api namespace like this: 


$(document) .off( ' . alert . data-api ' ) 
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Programmatic API 

The developers of Bootstrap believe that you should be able to use all of the 
plugins purely through the JavaScript API. All public APIs are single, chainable 
methods, and return the collection acted upon say for example: 


$(" . btn . danger" ) .button("toggle") .addClass("fat") 


All methods accept an optional options object, a string which targets a particular 
method, or nothing (which initiates a plugin with default behavior) as shown 
below: 


// initialized with defaults 
$( "#myModal" ) .modal() 

// initialized with no keyboard 
$( "ttmyModal" ) .modal({ keyboard: false }) 

// initializes and invokes show immediately 
$( "ttmyModal" ) .modal( ' show' ) 

Each plugin also exposes its raw constructor on a Constructor property 
\$.fn.popover. Constructor. If you'd like to get a particular plugin instance, 
retrieve it directly from an element: 

$( ' [rel=popover] ' ) .data( ' popover ' ) . 


No Conflict 

Bootstrap plugins can sometimes be used with other UI frameworks. In these 
circumstances, namespace collisions can occasionally occur. To overcome this 
call .noConflict on the plugin you wish to revert the value of. 

// return $.fn. button to previously assigned value 
var bootstrapButton = $.fn. button. noConflictQ 
// give $( ) . bootstrapBtn the Bootstrap functionality 

$.fn.bootstrapBtn = bootstrapButton 


Events 

Bootstrap provides custom events for most plugin's unique actions. Generally, 
these events come in two forms: 
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• Infinitive form: This is triggered at the start of an event. E.g. show. 
Infinitive events provide preventDefault functionality. This provides the 
ability to stop the execution of an action before it starts. 

$( 'ttmyModal ') .on( ' show. bs .modal ' , function (e) { 

// stops modal from being shown 

if (idata) return e.preventDefaultQ 

}) 

• Past participle form: This is triggered on the completion of an 
action. E.g. shown. 
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34. TRANSITION PLUGIN 


The transition plugin provides a simple transition effects. 

If you want to include this plugin functionality individually, then you will need 
transition.js once alongside the other JS files. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap .js or the 
m i n i f i e d bo o ts trap . m in .js . 

Transition.js is a basic helper for transition End events as well as a CSS 
transition emulator. It is used by the other plugins to check for CSS transition 
support and to catch hanging transitions. 


Use Cases 


A few examples of the transition plugin are: 

• Sliding or fading in modals. You can find an example in the 
chapter Bootstrap Modal Plugin. 

• Fading out tabs. You can find an example in the chapter Bootstrap Tab 
Plugin. 

• Fading out alerts. You can find an example in the chapter Bootstrap 
Alerts. 

• Sliding carousel panes. You can find an example in the chapter Bootstrap 
Carousel Plugin. 
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35. MODAL PLUGIN 


A modal is a child window that is layered over its parent window. Typically, the 
purpose is to display content from a separate source that can have some 
interaction without leaving the parent window. Child windows can provide 
information, interaction, or more. 

If you want to include this plugin functionality individually, then you will need 
modal.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you 
can include bootstrap.js or the minified bootstrap. min.js. 

Usage 

You can toggle the modal plugin's hidden content: 

• Via data attributes: Set attribute data-toggle="modal" on a controller 

element, like a button or link, along with a data- 

target="#identifier" or href="#identifier" to target a specific modal 
(with the id = "identifier") to toggle. 

• Via JavaScript: Using this technique you can call a modal with 
id = "identifier" with a single line of JavaScript: 


$( '#identifier ' ) .modal(options) 


Example 

A static modal window example is shown in the following example: 

<h2>Example of creating Modals with Twitter Bootstrap</h2> 

<!-- Button trigger modal --> 

<button class="btn btn-primary btn-lg" data-toggle="modal" 
data-target="#myModal" > 

Launch demo modal 

</button> 

<!-- Modal --> 

<div class="modal fade" id="myModal" tabindex="-l" role="dialog" 
a r ia - la belled by ="myModal Label" aria - hidden= "t rue" > 

<div class="modal-dialog" > 
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<div class="modal-content"> 

<div class="modal-headen" > 

cbutton type="button" class="close" 

data -dismiss=" modal" ania-hidden="tnue"> 

Stimes; 

</button> 

<h4 class="modal-title" id="myModalLabel" > 

This Modal title 
</h4> 

</div> 

<div class="modal-body"> 

Add some text here 
</div> 

<div class="modal-footer" > 

<button type="button" class="btn btn-default" 
data -dismiss=" modal" >Close 
</button> 

<button type="button" class="btn btn-primany"> 

Submit changes 
</button> 

</div> 

</div><!-- /.modal-content --> 

</div><!-- /.modal --> 

Details of the preceding code: 

• To invoke the modal window, you need to have some kind of a trigger. 
You can use a button or a link. Here we have used a button. 

• If you look in the code above, you will see that in the <button> tag, 
the data-target="#myModal" is the target of the modal that you want 
to load on the page. This code allows you to create multiple modals on the 
page and then have different triggers for each of them. Now, to be clear, 
you don't load multiple modals at the same time, but you can create 
many on the pages to be loaded at different times. 

• There are two classes to take note of in the modal: 

o The first is .modal, which is simply identifying the content of the 
<div> as a modal. 
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o And second is the .fade class. When the modal is toggled, it will cause 
the content to fade in and out. 

• aria-labelledby="myModalLaber, attribute reference the modal title. 

• The attribute aria-hidden = "true" is used to keep the Modal Window 
invisible till a trigger comes (like a click on the associated button). 

• <div class="modal-header">, modal-header is the class to define style for 
the header of the modal window. 

• class="close", is a CSS class close that sets style for the Close button of 
the modal window. 

• data-dismiss="modal", is a custom HTML5 data attribute. Here it is used 
to close the modal window. 

• class = "modal-body", is a CSS class of Bootstrap CSS to set style for body 
of the modal window. 

• class="modal-footer", is a CSS class of Bootstrap CSS to set style for 
footer of the modal window. 

• data-toggle="modal", HTML5 custom data attribute data-toggle is used to 
open the modal window. 



Options 


There are certain options which can be passed via data attributes or JavaScript 
to customize the look and feel of the Modal Window. Following table lists the 
options: 


Option 

Name 

Type/Default 

Value 

Data 

attribute 

name 

Description 

backdrop 

boolean or the 
string 'static' 

data- 

backdrop 

Specify static for a backdrop, if you 
don't want the modal to be closed 
when the user clicks outside of the 
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Default: true 


modal. 

keyboard 

boolean 

Default: true 

data- 

keyboard 

Closes the modal when escape key 
is pressed; set to false to disable. 

show 

boolean 

Default: true 

data-show 

Shows the modal when initialized. 

remote 

path 

Default: false 

data- 

remote 

Using the jQuery .load method, 
inject content into the modal body. 
If an href with a valid URL is 


added, it will load that content. An 
example of this is shown below: 


<a data-toggle="modal" 
href="remote. html" data- 
tanget="#modal" >Click me</a> 


Methods 


Here are some useful methods that can be used with modal(). 


Method 

Description 

Example 

Options:, modal(options) 

Activates your 
content as a modal. 
Accepts an optional 
options object. 

$( ' #identif ien ' ) .modal({ 

keyboard: false 

}) 

Toggle:, modal('toggle') 

Manually toggles a 
modal. 

$( ’ #identif ier ' ) .modal( 'toggle' ) 

Show:.modal('show') 

Manually opens a 
modal. 

$( ' #identif ier ' ) .modal ( 1 show' ) 

Hide:.modal('hide') 

Manually hides a 
modal. 

$( ’ #identif ier ' ) .modal( ' hide' ) 


Example 

The following example demonstrates the usage of methods: 
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<h2>Example of using methods of Modal Plugin</h2> 

<!-- Button trigger modal --> 

<button class="btn btn-primary btn-lg" data-toggle="modal" data- 
target="#myModal"> 

Launch demo modal 

</button> 

<!-- Modal --> 

<div class="modal fade" id="myModal" tabindex="-l" role="dialog" 
a r ia - la belled by ="myModal Label" aria - hidden= "t rue" > 

<div class="modal-dialog" > 

<div class="modal-content"> 

<div class="modal-header" > 

<button type="button" class="close" data-dismiss="modal" 
aria -hidden=" true" >x 
</button> 

<h4 class="modal-title" id="myModalLabel" > 

This Modal title 
</h4> 

</div> 

<div class="modal-body"> 

Press ESC button to exit. 

</div> 

<div class="modal-footer" > 

<button type="button" class="btn btn-default" 
data -dismiss=" modal" >Close 
</button> 

<button type="button" class="btn btn-primary"> 

Submit changes 
</button> 

</div> 

</div><!-- /.modal-content --> 

</div><!-- /.modal-dialog --> 



163 


Bootstrap 


</div><!-- /.modal --> 

<script> 

$(function () { $( ’ttmyModal' ) .modal({ 
keyboard: true 

})}); 

</script> 



Just click the Esc button and the modal window exits. 

Events 

Following table lists the events to work with modal. These events may be used 
to hook into the function. 


Event 

Description 

Example 

show. bs. modal 

Fired after the show 
method is called. 

$( '#identifier ' ) . on( ' show. bs .modal ’ , 
function () { 

// do something... 

}) 

shown. bs. modal 

Fired when the modal 
has been made visible 
to the user (will wait 
for CSS transitions to 
complete). 

$( ’ttidentifier ' ) . on( ' shown . bs. modal ’ , 
function () { 

// do something... 

}) 

hide. bs. modal 

Fired when the hide 
instance method has 
been called. 

$( ’ttidentifier ' ) . on( ' hide. bs .modal ’ , 
function () { 

// do something... 

}) 
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hidden. bs. modal 

Fired when the modal 

$( '#identifier ' ) . on( ' hidden. bs . modal ' j 


has finished being 

function () { 


hidden from the user. 

// do something... 



}) 


Example 

The following example demonstrates the usage of events: 

<h2>Example of using events of Modal Plugin</h2> 

<!-- Button trigger modal --> 

cbutton class="btn btn-primary btn-lg" data-toggle="modal" data- 
target="#myModal"> 

Launch demo modal 

</button> 

<!-- Modal --> 

<div class="modal fade" id="myModal" tabindex=" -1" role="dialog" 
a r ia - la belled by ="myModal Label" aria - hidden= "t rue" > 

<div class="modal-dialog" > 

<div class="modal-content"> 

<div class="modal-header" > 

cbutton type="button" class="close" data-dismiss="modal" 
aria -hidden=" true" >x 
</button> 

<h4 class="modal-title" id="myModalLabel" > 

This Modal title 
</h4> 

</div> 

<div class="modal-body"> 

Click on close button to check Event functionality. 
</div> 

<div class="modal-footer" > 

cbutton type="button" class="btn btn-default" 
data -dismiss=" modal" > 
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Close 

</button> 

cbutton type="button" class="btn btn-primany"> 

Submit changes 
</button> 

</div> 

</div><!-- /.modal-content --> 

</div><!-- /.modal-dialog --> 

</div><!-- /.modal --> 

<script> 

$(function () { $( 'ttmyModal '). modal( ' hide ')})}) ; 

</scnipt> 

<script> 

$(function () { $( ’ttmyModal '). on( ' hide. bs .modal 1 , function () { 
alert('Heyj I heard you like modals ...'); }) 

}); 

</script> 



As seen in the above screen, if you click on the Close button i.e. hide event, an 
alert message is displayed. 
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36. DROPDOWN PLUGIN 


Using Dropdown plugin you can add dropdown menus to any components like 
navbars, tabs, pills and buttons. 

If you want to include this plugin functionality individually, then you will need 
dropdown.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, 
you can include bootstrap. js or the minified bootstrap. min.js. 

Usage 


You can toggle the dropdown plugin's hidden content: 

• Via data attributes: Add data-toggle="dropdown" to a link or button 
to toggle a dropdown as shown below: 


<div class="dropdown" > 


<a data-toggle="dropdown" 

href="#">Dropdown trigger</a> 

<ul class="dropdown-menu" 

role="menu" aria -labelledby="d Label "> 

</ul> 


</div> 



If you need to keep links intact (which is useful if the browser is not enabling 
JavaScript), use the data-target attribute instead ofhref="#": 


<div class="dropdown" > 

<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" 
href="/page.html"> 

Dropdown <span class="caret"x/span> 

</a> 

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 

</ul > 

</div> 
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• Via JavaScript: To call the dropdown toggle via JavaScript, use the 
following method: 

$( ' .dropdown-toggle' ) .dropdownQ 

Example 

WITHIN NAVBAR 

The following example demonstrates the usage of dropdown menu within a 
navbar: 

<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 

<div> 

<ul class="nav navbar-nav"> 

<li class = "active"xa href="#">iOS</ax/li> 

<lixa href="#">SVN</ax/li> 

<li class="dropdown" > 

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java 

<b class = "caret" x/b> 

</a> 

<ul class="dropdown-menu"> 

<lixa href="#">jmeter</ax/li> 

<lixa href="#">EDB</ax/li> 

<lixa href="#">Dasper Report</ax/li> 

<li class="divider" x/li> 

<lixa href="#">Separated link</ax/li> 

<li class="divider" x/li> 

<lixa href="#">One more separated link</ax/li> 

</ul> 

</li> 

</ul> 

</div> 
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Within Tabs 

The following example demonstrates the usage of dropdown menu within tabs: 

<p>Tabs With Dropdown Example</p> 

<ul class="nav nav-tabs"> 

<li class="active" ><a href="#" >Home</ax/li> 

<lixa href="#" >SVN</ax/li> 
clixa href="#">iOS</ax/li> 

<lixa href="#" >VB. Net</ax/li> 

<li class="dropdown" > 

<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 

Dava <span class="caret" x/span> 

</a> 

<ul class="dropdown-menu"> 

<lixa href="#">Swing</ax/li> 

<lixa href="#">jMeterc/ax/li> 

<lixa href="#">EDB</ax/li> 

<li class = "divider" x/li> 

clixa href="#">Separated link</ax/li> 

</ ul> 

</li> 

clixa href="#" >PHPc/a>c/li> 
c/ul> 
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Tabs With Dropdown Example 



Home SVN iOS VB.I 

1 I 

Net Java » 

PHP 


Swing 

(Meter 

EJB 


Separated link 


Options 

There are no options. 


Methods 

The dropdown toggle has a simple method to show or hide the dropdown. 

$() .dropdown( 'toggle' ) 

Example 

The following example demonstrates the usage of dropdown plugin method. 

<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header" > 

<a class="navbar-brand" href="#" >TutorialsPoint</a> 

</div> 

<div id="myexample"> 

<ul class="nav navbar-nav"> 

<li class = "active"xa href="#">iOS</ax/li> 
clixa href="#">SVN</ax/li> 

<li class="dropdown" > 

<a href="#" class="dropdown-toggle">Dava <b 
class = " caret" x/bx/a> 

<ul class="dropdown-menu"> 

<lixa id="action-l" href="#"> 
jmeter</a> 



T70 


Bootstrap 


</li> 

<lixa href="#">EDB</ax/li> 

<lixa href="#" >Dasper Report</ax/li> 

<li class="dividen"x/li> 

<lixa href="#">Separated link</ax/li> 

<li class="dividen"x/li> 

<lixa href="#">One more separated link</ax/li> 
</ul> 

</li> 

</ul> 

</div> 

</nav> 

</div> 

<script> 

$(function(){ 

$(" .dropdown-toggle") .dropdown( 'toggle' ); 

}); 

</script> 


Tuto 

rialsPomt IOS 

SVN Java ~ 



(meter 

EJB 

Jasper Report 



Separated link 



One more separated link 
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The Scrollspy (auto updating nav) plugin allows you to target sections of the 
page based on the scroll position. In its basic implementation, as you scroll, you 
can add .active classes to the navbar based on the scroll position. 

If you want to include this plugin functionality individually, then you will need 
scrollspy.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you 
can include bootstrap.js or the minified bootstrap. min.js. 

Usage 

You can add scrollspy behavior to your topbar navigation: 

• Via data attributes: add data-spy="scroN" to the element you want to 
spy on (typically the body). Then add attribute data-target with the ID or 
class of the parent element of any Bootstrap .nav component. For this to 
work, you must have elements in the body of the page that have 
matching IDs of the links that you are spying on. 


cbody data-spy="scroll" data-target=" . navbar-example"> 

<div class="navbar-example"> 

<ul class="nav nav-tabs"> 

</ul > 

</div> 

</body> 


• Via JavaScript: You can invoke the scrollspy with JavaScript instead of 
using the data attributes, by selecting the element to spy on, and then 
invoking the .scrollspyQ function: 


$( ' body ' ) . scrollspy({ target: ' . navbar-example ' }) 


Example 

The following example shows the use of scrollspy plugin via data attributes: 
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<nav id="navbar-example" class="navban navbar-default navbar-static" 
nole=" navigation "> 

<div class="navbar-header"> 

<button class="navbar-toggle" type="button" data-toggle="collapse" 
data-target=" . bs- js-navban -scroll spy" > 

<span class="sr-only">Toggle navigation</span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navban-bnand" href="#">Tutonial Name</a> 

</div> 

<div class="collapse navbar-collapse bs- js-navbar-scrollspy"> 

<ul class="nav navban-nav"> 

<lixa href="#ios">iOS</ax/li> 

<lixa href="#svn">SVN</ax/li> 

<li class="dnopdown"> 

<a href="#" id="navbanDropl" class="dnopdown-toggle" 
data-toggle="dropdown">Dava 
<b class="caret"x/b> 

</a> 

<ul class="dnopdown-menu" role="menu" 
ania-labelledby="navbanDropl"> 

<lixa href="#jmeter" tabindex=" -l">jmeter</ax/li> 

<lixa href="#ejb" tabindex=" -l">ejb</ax/li> 

<li class="dividen"x/li> 

<lixa href="#spring" tabindex=" -l">spring</ax/li> 

</ul > 

</li> 

</ul> 

</div> 

</nav> 

<div data-spy="scroll" data-target="#navbar-example" data-off set="0" 
style="height : 200px; overflow: auto; position: relative; "> 
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<h4 id="ios">iOS</h4> 

<p>iOS is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
TV. iOS is derived from OS X, with which it shares the Darwin 
foundation. iOS is Apple's mobile version of the OS X operating system 
used on Apple computers. 

</p> 

<h4 id="svn">SVN</h4> 

<p>Apache Subversion which is often abbreviated as SVN, is a software 
versioning and revision control system distributed under an open source 
license. Subversion was created by CollabNet Inc. in 2000, but now it 
is developed as a project of the Apache Software Foundation, and as 
such is part of a rich community of developers and users. 

</p> 

<h4 id=" jmeter">jl v leter</h4> 

<p>jMeter is an Open Source testing software. It is 100% pure lava 
application for load and performance testing. 

</p> 

<h4 id="ejb">EDB</h4> 

<p>Enterprise lava Beans (EDB) is a development architecture for building 
highly scalable and robust enterprise level applications to be deployed 
on D2EE compliant Application Server such as DBOSS, Web Logic etc. 

</p> 

<h4 id="spring">Spring</h4> 

<p>Spring framework is an open source lava platform that provides 
comprehensive inf rastructure support for developing robust lava 
applications very easily and very rapidly. 

</p> 

<p>Spring framework was initially written by Rod Johnson and was first 
released under the Apache 2.0 license in Dune 2003. 

</p> 

</div> 
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os 

tOS is a moMfr cpcainn system developed » nd dofrfcutod by App4t Inc. Ongn*>y released n 2007 lor T* P’coe Pod Touch, and Apple TV OS « dotNod from OS X «0t 
il sheret Ihe Danm lo^xlirton OS n Apc*e a m ot*t* wwi of the 0$ X opcrBtng *p£«»m used on Apple co**puter» 

SVN 

Apa ere Sutoverson vt^ich s otter abbreraled as SVN. >s a software versworg and wi*r ocrlrot system dtstnouted under an open source Icense Subversion was created 
by CoUfcNet tec in 2000 but n cm t a developed as a preset at (ho Apache ScAeaie Fou«iaicn and m such • part ot a rich oocmrurtry o’ datalopars and uun 

Meter 


Options 


Options can be passed via data attributes or JavaScript. Following table lists the 
options: 


Option 

Name 

Type/Default 

Value 

Data 

attribute 

name 

Description 

offset 

number 

Default: 10 

data-offset 

Pixels to offset from top when 
calculating position of scroll. 


Methods 

.scrollspy('refresh'): When calling the scrollspy via the JavaScript method, 
you need to call the .refresh method to update the DOM. This is helpful if any 
elements of the DOM have changed i.e. if you have added or removed some 
elements. Following would be the syntax to use this method. 

$( ' [data-spy="scroll" ] ' ) . each(function () { 
var $spy = $(this) . scrollspy( ' refresh ' ) 

» 


Example 

The following example demonstrates the use of .scrollspy('refresh') method: 

<nav id="myScrollspy" class="navbar navbar-default navbar-static" 
role=" navigation "> 

<div class="navbar-header"> 

ebutton class="navbar-toggle" type="button" data-toggle="collapse" 
data-target=" . bs- js-navbar -scroll spy" > 

<span class="sr-only">Toggle navigation</span> 
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<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navban-bnand" href="#">Tutorial Name</a> 

</div> 

<div class="collapse navbar-collapse bs- js-navban-scnollspy"> 

<ul class="nav navbar-nav"> 

<li class="active"xa href="#ios">iOS</ax/li> 

<lixa href="#svn">SVN</ax/li> 

<li class="dnopdown"> 

<a href="#" id="navbanDropl" class="dropdown-toggle" 
data-toggle="dropdown">Dava 
<b class="caret"x/b> 

</a> 

<ul class="dnopdown-menu" nole="menu" 
ania-labelledby="navbarDropl"> 

<lixa href="#jmeten" tabindex=" -l">jmeten</ax/li> 

<lixa hnef="#ejb" tabindex=" -l">ejb</ax/li> 

<li class="dividen"x/li> 

<lixa href="#spring" tabindex=" -l">spring</ax/li> 

</ul> 

</li> 

</ul> 

</div> 

</nav> 

<div data-spy="scroll" data-target="#myScnollspy" data-off set="0" 
style="height : 200px; overflow: auto; position: relative; "> 

<div class="section" > 

<h4 id="ios">iOS<smallxa href="#" onclick="removeSection(this) ; " > 
Stimes; Remove this section</ax/small> 

</h4> 

<p>iOS is a mobile operating system developed and distributed by 

Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 

176 



Bootstrap 


Apple TV. iOS is derived from OS X, with which it shares the Darwin 
foundation. iOS is Apple's mobile version of the OS X operating system 
used on Apple computers . </p> 

</div> 

<div class="section" > 

<h4 id= " svn " >SVN< small ></smallx/h4> 

<p>Apache Subversion which is often abbreviated as SVN, is a software 
versioning and revision control system distributed under an open source 
license. Subversion was created by CollabNet Inc. in 2000, but 
now it is developed as a project of the Apache Software Foundation, 
and as such is part of a rich community of developers and users. </p> 
</div> 

<div class="section" > 

<h4 id=" jmeter" > jMetercsmallxa href="#" onclick="removeSection(this); "> 
Stimes; Remove this section</ax/small> 

</h4> 

<p>jMeter is an Open Source testing software. It is 100% pure lava 
application for load and performance testing. </p> 

</div> 

<div class="section"> 

<h4 id="ejb">EDB</h4> 

<p>Enterprise lava Beans (EDB) is a development architecture for 
building highly scalable and robust enterprise level applications 
to be deployed on D2EE compliant Application Server such as 
DBOSS, Web Logic etc.</p> 

</div> 

<div class="section" > 

<h4 id="spring">Spring</h4> 

<p>Spring framework is an open source lava platform that provides 
comprehensive inf rastructure support for developing robust lava 
applications very easily and very rapidly. </p> 

<p>Spring framework was initially written by Rod Johnson and was first 
released under the Apache 2.0 license in Dune 2003. </p> 

</div> 
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</div> 

< script type= " text/ java script "> 

$(function( ){ 

removeSection = function(e) { 

$(e) . parents ( " . section" ) . remove ( ) ; 

$( ' [data-spy="scroll"] ’ ) . each(function () { 
var $spy = $(this) . scrollspy( ' refresh ' ) 

}); 

} 

$( "#mySc rolls py" ) . s c rolls py ( ) ; 

}); 

</script> 


Ramovs ths sections to s«« ths effect of fefrssh method Bootstrap adjusts the htghAghtma for the remaining elements 

Tutorial Name os svn Java • 


iOS • Remove Ihw accron 

OS « a mobfe operating system developed and distributsd by Apple Inc Ongnaly released n 2007 for the iPhone. iPod Touch, and Apple 
TV OS n derived from OS X. with which il shares the Darwin foundation OS a Apple's mobile version of the OS X operalng system used on 
Apple computers 

SVN 

Apache Subversion which s often abbreviated as SVN. is a software vsrswnng and revision confrol system distributed under an open source 
tcense Subversion was created by ColabNet Inc. in 2000. but now II a developed as a project of the Apache Software Foundation, and as 
such is part of a nch community of developers and users 


Events 

The following table lists the events to work with scrollspy. This event may be 
used to hook into the function. 


Event 

Description 

Example 

activate. bs. scrollspy 

This event 

$( ’ #mySc rolls py ' ) . on( ’ activate . bs . scrollspy ' , 

fires 

function () { 


whenever a 

// do something... 


new item 

becomes 
activated by 
the scrollspy. 

}) 
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Example 

The following example demonstrates the use of activate. bs.scrollspy event: 

<nav id="myScrollspy" class="navbar navbar-default navbar-static" 
role=" navigation "> 

<div class="navbar-header"> 

<button class="navbar-toggle" type="button" data-toggle="collapse" 
data-target=" . bs-js-navbar -scroll spy" > 

<span class="sr-only">Toggle navigation</span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navbar-brand" href="#">Tutorial Name</a> 

</div> 

<div class="collapse navbar-collapse bs- js-navbar-scrollspy"> 

<ul class="nav navbar-nav"> 

<li class="active"xa href="#ios">iOS</ax/li> 

<lixa href="#svn">SVN</ax/li> 

<li class="dropdown"> 

<a href="#" id="navbarDropl" class="dropdown-toggle" 
data-toggle="dropdown"> 
lava <b class="caret"x/b> 

</a> 

<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDropl"> 

<lixa href="#jmeter" tabindex=" -l">jmeter</ax/li> 

<lixa href="#ejb" tabindex=" -l">ejb</ax/li> 

<li class="divider"x/li> 

<lixa href="#spring" tabindex=" -l">spring</ax/li> 

</ul> 

</li> 

</ul> 

</div> 
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</nav> 

<div data-spy="scroll" data-target="#myScrollspy" data-off set="0" 
style="height : 200px; overflow: auto; position: relative; "> 

<div class="section" > 

<h4 id="ios">iOS<smallxa href="#" onclick="removeSection(this) ; " > 
Stimes; Remove this section</ax/small> 

</h4> 

<p>iOS is a mobile operating system developed and distributed by 
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, 
and Apple TV. iOS is derived from OS X, with which it shares 
the Darwin foundation. iOS is Apple's mobile version of the OS X 
operating system used on Apple computers . </p> 

</div> 

<div class="section" > 

<h4 id= " svn " >SVN< small x/smallx/h4> 

<p>Apache Subversion which is often abbreviated as SVN, is a software 
versioning and revision control system distributed under an open 
source license. Subversion was created by CollabNet Inc. in 2000, 
but now it is developed as a project of the Apache Software 
Foundation, and as such is part of a rich community of developers 
and users. </p> 

</div> 

<div class="section" > 

<h4 id=" jmeter"> jMeter<smallxa href="#" onclick="removeSection(this); "> 
Stimes; Remove this section</ax/small> 

</h4> 

<p>jMeter is an Open Source testing software. It is 100% pure Dava 
application for load and performance testing. </p> 

</div> 

<div class="section" > 

<h4 id="ejb">EDB</h4> 

<p>Enterprise Dava Beans (EDB) is a development architecture for 
building highly scalable and robust enterprise level applications 
to be deployed on D2EE compliant Application Server such as DBOSS, 
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Web Logic etc.</p> 

</div> 

<div class="section" > 

<h4 id="spring" >Spring</h4> 

<p>Spring framework is an open source Java platform that provides 
comprehensive inf rastructure support for developing robust lava 
applications very easily and very rapidly. </p> 

<p>Spring framework was initially written by Rod Johnson and was 
first released under the Apache 2.0 license in Dune 2003. </p> 

</div> 

</div> 

< script type="text/ java script "> 

$(function(){ 

removeSection = function(e) { 

$(e) . parents ( " . section" ) . remove ( ) ; 

$( ' [data-spy="scroll"] ’ ) . each(function () { 
var $spy = $(this) . scrollspy( ' ref resh ’ ) 

}); 

} 

$( "#mySc rolls py" ) . s c rolls py ( ) ; 

$( ’#myScrollspy ') .on( ' activate. bs . scrollspy ' j function () { 
var currentltem = $(".nav li. active > a").text(); 

$( "#activeitem" ). html( "Currently you are viewing - " + currentltem); 

}) 

}); 

</script> 
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Currently you are viewing • iOS 

Scroll through the elements aryl see how the above toe changes its content based on active element 

Tutorial Name iOS svn Java - 


OS - Rcmovo tms Melon 

IOS a a mobile opeiatmg system developed and distributed by Apple Inc. Originally released In 2007 lor the IPhone, iPod Touch, and Apple 
TV iOS ts derived from OS X. with which A shares the Darwin foundation, OS is Apple s mobile version of the OS X operating system used on 
Apple compute's 

SVN 

Apacne Subversion which & often aDbrevated as SVN. is a software versioning and revision control system distributed under an open soisce 
loense. Subversion was created by CollabNel Inc. In 2000. but now it is developed as a project of the Apache Software Foundation and as 
such Is part ot a rich community ot developers and users 



182 


38. TAB PLUGIN 


Tabs were introduced in the chapter Bootstrap Navigation Elements. By 
combining a few data attributes, you can easily create a tabbed interface. With 
this plugin you can transition through panes of local content in tabs or pills, even 
via dropdown menus. 

If you want to include this plugin functionality individually, then you will 
needtab.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you 
can include bootstrap.js or the minified bootstrap. min.js. 

Usage 

You can enable tabs in the following two ways: 

• Via data attributes: you need to add data-toggle = "tab" or data- 
toggle="pill" to the anchors. 

Adding the nav and nav-tabs classes to the tab ul will apply the 
Bootstrap tab styling, while adding the nav and nav-pills classes will 
apply pill styling. 


<ul class="nav nav-tabs"> 

clixa href="#identif ier" data-toggle="tab" >Home</ax/li> 

</ul> 


• Via JavaScript: you can enable tabs using Javscript as below : 

$('#myTab a '). click(f unction (e) { 
e . preventDef ault ( ) 

$(this) .tab( ' show' ) 

}) 

Here's an example of different ways to activate individual tabs: 

// Select tab by name 

$( 1 #myTab a [href="#prof ile" ] ’ ) . tab( ’ show’ ) 

// Select first tab 
$(’#myTab a :first ’ ) .tab ( 1 show’ ) 
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// Select last tab 
$('#myTab a : last ' ) . tab( ' show ' ) 

// Select third tab (0-indexed) 
$('#myTab li:eq(2) a ' ) .tab( ' show’ ) 


Fade Effect 


To get a fade effect for tabs, add .fade to each .tab-pane. The first tab pane 
must also have .in to properly fade in initial content: 


<div class="tab-content" > 




<div 

class="tab-pane fade 

in active" 

id="home">. 

. </div> 

<div 

class="tab-pane fade" 

id="svn"> . 

. . </div> 


<div 

class="tab-pane fade" 

id="ios"> . 

. . </div> 


<div 

class="tab-pane fade" 

id=" java" > 

. . .</div> 


</div> 






Example 

An example of tab plugin using data attributes and fade effect is shown in the 
following example: 

<ul id="myTab" class="nav nav-tabs"> 

<li class="active"> 

<a href="#home" data-toggle="tab"> 

Tutorial Point Home 
</a> 

</li> 

<lixa href="#ios" data-toggle="tab">iOS</ax/li> 

<li class="dropdown" > 

<a href="#" id="myTabDropl" class="dropdown-toggle" 
data-toggle="dropdown">Dava 
<b class="caret"x/b> 

</a> 

<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDropl"> 
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<lixa href="#jmeter" tabindex=" -1" data-toggle="tab"> jmeter</ax/li> 
clixa href="#ejb" tabindex=" -1" data-toggle="tab">ejb</ax/li> 
</ ul> 

</li> 

</ul> 

<div id="myTabContent" class="tab-content"> 

<div class="tab-pane fade in active" id="home"> 

<p>Tutorials Point is a place for beginners in all technical areas. 
This website covers most of the latest technoligies and explains 
each of the technology with simple examples. You also have a 
<b>tryit</b> editor wherein you can edit your code and 
try out different possibilities of the examples . </p> 

</div> 

<div class="tab-pane fade" id="ios"> 

<p>iOS is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone., iPod Touch, and 
Apple TV. iOS is derived from OS X, with which it shares the 
Darwin foundation. iOS is Apple's mobile version of the 
OS X operating system used on Apple computers . </p> 

</div> 

<div class="tab-pane fade" id="jmeter"> 

<p>jMeter is an Open Source testing software. It is 100% pure 
lava application for load and performance testing. </p> 

</div> 

<div class="tab-pane fade" id="ejb"> 

<p>Enterprise lava Beans (EDB) is a development architecture 
for building highly scalable and robust enterprise level 
applications to be deployed on D2EE compliant 
Application Server such as DBOSS, Web Logic etc. 

</p> 

</div> 

</div> 
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Tutorial Point Home iOS Java - 

T utonals Point is a place for beginners in all technical areas. This website covers most of the latest 
technoligies and explains each of the technology with simple examples. You also have a tryit editor, 
wherein you can edit your code and try out different possibilities of the examples. 


Methods 

.$().tab: This method activates a tab element and content container. Tab 
should have either a data-target or an href targeting a container node in the 
DOM. 

<ul class="nav nav-tabs" id="myTab"> 

<li class="active" ><a href="#identif ier" data- 
toggle="tab">Home</ax/li> 


</ul> 

<div class="tab-content" > 

<div class="tab-pane active" id="home">. . .</div> 


</div> 

<script> 

$(function () { 

$(’#myTab a : last ' ) . tab( ' show' ) 

}) 

</script> 


Example 

The following example shows the use of tab plugin method .tab. Here in the 
example the second tab iOS is activated: 

<ul id="myTab" class="nav nav-tabs"> 

<li class="active"xa href="#home" data-toggle="tab"> 

Tutorial Point Home</a> 

</li> 

<lixa href="#ios" data-toggle="tab">iOS</ax/li> 

<li class="dropdown" > 
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<a href="#" id="myTabDnopl" class="dnopdown-toggle" 
data-toggle="dropdown">Dava <b class="canet"x/b> 

</a> 

<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDropl"> 
<lixa href="#jmeten" tabindex=" -1" data-toggle="tab"> 
jmeten</a> 

</li> 

clixa href="#ejb" tabindex=" -1" data-toggle="tab"> 
ejb</a> 

</li> 

</ ul> 

</li> 

</ul> 

<div id="myTabContent" class="tab-content"> 

<div class="tab-pane fade in active" id="home"> 

<p>Tutorials Point is a place for beginners in all technical areas. 
This website covers most of the latest technoligies and explains 
each of the technology with simple examples. You also have a 
<b>tryit</b> editor, wherein you can edit your code and 
try out different possibilities of the examples . </p> 

</div> 

<div class="tab-pane fade" id="ios"> 

<p>iOS is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
Apple TV. iOS is derived from OS X, with which it shares the 
Darwin foundation. iOS is Apple's mobile version of the 
OS X operating system used on Apple computers . </p> 

</div> 

<div class="tab-pane fade" id="jmeter"> 

<p>jMeter is an Open Source testing software. It is 100% pure 
lava application for load and performance testing. </p> 

</div> 

<div class="tab-pane fade" id="ejb"> 

<p>Enterprise lava Beans (EDB) is a development architecture 
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for building highly scalable and robust enterprise level 
applications to be deployed on D2EE compliant 
Application Server such as DBOSSj Web Logic etc. 

</p> 

</div> 

</div> 

<script> 

$(function () { 

$('#myTab li:eq(l) a ' ) .tab( ' show' ) ; 

}); 

</script> 


IOS ts a moW© operating system developed and distributed by Apple Inc. Ongmalfy released <n 2007 tor the ^tione iPod Touch, and Apple TV. 
OS Is denved from OS X. with whch it shares the Damn toundabon OS is Apple's moWe version of the OS X operating system used on Apple 
computers 


Events 

Following table lists the events to work with tab plugin. This event may be used 
to hook into the function. 


Event 

Description 

Example 

show. bs. tab 

This event fires on tab show, 
but before the new tab has 
been shown. 

Use event.target and 
event.relatedTarget to 

target the active tab and the 
previous active tab (if 
available) respectively. 

$( ' a[data- 

toggle="tab" ] ' ) . on ( ' show. bs .tab ' , 
function (e) { 

e. target // activated tab 

e. relatedTarget // previous tab 

}) 

shown, bs. tab 

This event fires on tab show 
after a tab has been shown. 

Use event.target and 

event.relatedTarget to 

target the active tab and the 

$( ' a[data- 

toggle="tab" ] 1 ) .on( ' shown. bs .tab ' , 
function (e) { 

e. target // activated tab 
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previous active tab (if e.nelatedTanget // previous tab 
available) respectively. 

Example 

The following example shows use of tab plugin events. Here in the example we 
will display the current and previous visited tabs: 

<hr> 

<p class = "active-tab"xstrong>Active Tab</strong> : <spanx/spanx/p> 

<p class = "previous-tab"xstrong>Previous Tab</strong> : 

< span x /span x/p> 

<hr> 

<ul id="myTab" class="nav nav-tabs"> 

<li class="active"xa href="#home" data-toggle="tab"> 

Tutorial Point Home</ax/li> 

<lixa href="#ios" data-toggle="tab">iOS</ax/li> 

<li class="dropdown" > 

<a href="#" id="myTabDropl" class="dropdown-toggle" 
data-toggle="dropdown"> 

Dava <b class="caret"x/bx/a> 

<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDropl"> 
<lixa href="#jmeter" tabindex=" -1" data-toggle="tab"> jmeter</ax/li> 
clixa href="#ejb" tabindex=" -1" data-toggle="tab">ejb</ax/li> 
</ul> 

</li> 

</ul> 

<div id="myTabContent" class="tab-content"> 

<div class="tab-pane fade in active" id="home"> 

<p>Tutorials Point is a place for beginners in all technical areas. 
This website covers most of the latest technoligies and explains 
each of the technology with simple examples. You also have a 
<b>tryit</b> editor, wherein you can edit your code and 
try out different possibilities of the examples . </p> 

</div> 

<div class="tab-pane fade" id="ios"> 
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<p>iOS is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
Apple TV. iOS is derived from OS X, with which it shares the 
Darwin foundation. iOS is Apple's mobile version of the 
OS X operating system used on Apple computers . </p> 

</div> 

<div class="tab-pane fade" id="jmeter"> 

<p>jMeter is an Open Source testing software. It is 100% pure 
lava application for load and performance testing. </p> 

</div> 

<div class="tab-pane fade" id="ejb"> 

<p>Enterprise lava Beans (EDB) is a development architecture 
for building highly scalable and robust enterprise level 
applications to be deployed on D2EE compliant 
Application Server such as DBOSS, Web Logic etc. 

</p> 

</div> 

</div> 

<script> 

$(function(){ 

$( ' a [data-toggle="tab" ] ' ) .on( ' shown . bs . tab ' , function (e) { 

// Get the name of active tab 
var activeTab = $(e. target) .text(); 

// Get the name of previous tab 

var previousTab = $(e. relatedTarget) .text(); 

$( " . active -tab span" ) . html( activeTab) ; 

$(" .previous-tab span") . html(previousTab) ; 

}); 

»; 

</script> 
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Active Tab OS 

Previous Tab Tutorial Pont Home 

Tutorial Point Home OS ! JavB • 

OS is a mob4e operating system developed and detnbuted by Apple Inc Originally released in 2007 tor the iPhone Pod Touch, and Apple TV 
OS « derived from OS X. with which it shares the Darwin found ate rv OS is Apple's mobAe version of the OS X operating system used on Apple 
computers. 
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39. TOOLTIP PLUGIN 


Tooltips are useful when you need to describe a link. The plugin was inspired by 
jQuery. tipsy plugin written by Jason Frame. Tooltips have since been updated to 
work without images, animate with a CSS animation, and data-attributes for 
local title storage. 

If you want to include this plugin functionality individually, then you will need 
tooltip.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you 
can include bootstrap.js or the minified bootstrap. min.js. 

Usage 

The tooltip plugin generates content and markup on demand, and by default 
places tooltips after their trigger element. You can add tooltips in the following 
two ways: 

• Via data attributes: To add a tooltip, add data-toggle = "tooltip" to an 

anchor tag. The title of the anchor will be the text of a tooltip. By default, 
tooltip is set to top by the plugin. 


<a href="#" data-toggle="tooltip" title="Example tooltip" >Hover 
over me</a> 


• Via JavaScript: Trigger the tooltip via JavaScript: 


$( '#identif ier ' ) .tooltip(options) 


Tooltip plugin is NOT only-css plugins like dropdown or other plugins discussed 
in previous chapters. To use this plugin you MUST activate it using jquery (read 
javascript). To enable all the tooltips on your page just use this script: 


$(function () { $(" [data-toggle= ' tooltip ']") .tooltip( ) ; }); 


Example 

The following example demonstrates the use of tooltip plugin via data attributes. 
<h4>Tooltip examples for anchors</h4> 

This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
title="Tooltip on left"> 

Default Tooltip 

</a>. 
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This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
data-placement="left" title="Tooltip on left"> 

Tooltip on Left 

</a>. 

This is a <a href="#" data-toggle="tooltip" data -placement="top" 
title="Tooltip on top"> 

Tooltip on Top 
</a>. 

This is a <a href="#" data-toggle="tooltip" data -placement="bottom" 
title="Tooltip on bottom"> 

Tooltip on Bottom 
</a>. 

This is a <a href="#" data-toggle="tooltip" data -placement="right" 
title="Tooltip on right"> 

Tooltip on Right 
</a> 

<br> 

<h4>Tooltip examples for buttons</h4> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
title="Tooltip on left"> 

Default Tooltip 
</button> 

cbutton type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="left" title="Tooltip on left"> 

Tooltip on left 
</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="top" title="Tooltip on top"> 

Tooltip on top 
</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
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data-placement="bottom" title="Tooltip on bottom"> 

Tooltip on bottom 
</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="night" title="Tooltip on right"> 

Tooltip on night 
</button> 

<scnipt> 

$(function () { $(" [data-toggle= ' tooltip ']") .tooltip( ) ; })j 
</scnipt> 


Toollip (gjpnjjr anchors 

This ts a Default T pq Hiq. This is a : 




ThtS ii 


This is a Tooltip on Bat'.om This is a 


Toollip examples lor buttons 

Detau* Tooltip ToottponletJ TocCpontop Tooltip on bottom Toollip on npni 


Options 


There are certain options which can be added via the Bootstrap Data API or 
invoked via JavaScript. Following table lists the options: 


Option 

Name 

Type/Default 

Value 

Data 

attribute 

name 

Description 

animation 

boolean 

Default: true 

data- 

animation 

Applies a CSS fade transition to the 
tooltip. 

html 

boolean 

Default: false 

data-html 

Inserts HTML into the tooltip. If 
false, jQuery's text method will be 
used to insert content into the dom. 
Use text if you're worried about 
XSS attacks. 

placement 

string function 
Default: top 

data- 

placement 

Specifies how to position the tooltip 
(i.e., top | bottom | left | right | auto). 
When auto is specified, it will 
dynamically reorient the tooltip. For 
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example, if placement is "auto left", 
the tooltip will display to the left 
when possible, otherwise it will 
display right. 

selector 

string 

Default: false 

data- 

selector 

If a selector is provided, tooltip 
objects will be delegated to the 
specified targets. 

title 

string | 

function 

Default: " 

data-title 

The title option is the default title 
value if the title attribute isn't 
present. 

trigger 

string 

Default: 'hover 
focus' 

data- 

trigger 

Defines how the tooltip is 
triggered: click | hover | focus | 
manual. You may pass multiple 
triggers; separate them with a 
space. 

content 

string | 

function 

Default: " 

data- 

content 

Default content value if data- 
content attribute isn't present. 

delay 

number | 

object 

Default: 0 

data-delay 

Delays showing and hiding the 
tooltip in ms — does not apply to 
manual trigger type. If a number is 
supplied, delay is applied to both 
hide/show. Object structure is: 

delay: 

{ show: 500, hide: 100 } 

container 

string | false 
Default: false 

data- 

container 

Appends the tooltip to a specific 
element. 

Example: container: 'body' 


Methods 


The following are some useful methods for tooltips: 
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Method 

Description 

Example 

Options: .tooltip(options) 

Attaches a tooltip 
handler to an 
element collection. 

$() .tooltip(options) 

Toggle:, tooltip('toggle') 

Toggles an 
element's tooltip. 

$( '#element' ) .tooltip( ’toggle’ ) 

Show:.tooltip('show') 

Reveals an 
element's tooltip. 

$( ’ #element ' ) . tooltip ( ' show’ ) 

Hide:.tooltip('hide') 

Hides an element's 
tooltip. 

$( ’ #element ' ) . tooltip ( ’ hide ’ ) 

Destroy: .tooltip('destroy') 

Hides and destroys 
an element's 
tooltip. 

$( ’ttelement' ) .tooltip( ’destroy' ) 


Example 

The following example demonstrates the use of tooltip plugin via data attributes. 

<div style="padding : 100px 100px 10px;"> 

This is a <a href="#" class="tooltip-show" data-toggle="tooltip" 
title="show">Tooltip on method show 
</a>. 

This is a <a href="#" class="tooltip-hide" data-toggle="tooltip" 
data-placement="left" title="hide">Tooltip on method hide 
</a>. 

This is a <a href="#" class="tooltip-destroy" data-toggle="tooltip" 
data-placement="top" title="destroy">Tooltip on method destroy 
</a>. 

This is a <a href="#" class="tooltip-toggle" data-toggle="tooltip" 
data-placement="bottom" title="toggle">Tooltip on method toggle 
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</a>. 

<brxbr><br><br><brxbr> 

<p class="tooltip-options" > 

This is a <a href="#" data-toggle="tooltip" title="<h2> ' am Header2 
</h2>">Tooltip on method options 
</a> . 

</p> 


<script> 

$(function () { $(' .tooltip-show ') .tooltip( ' show' );}) ; 

$(function () { $(' .tooltip-hide ') .tooltip( ' hide ');}) ; 

$(function () { $(’ .tooltip-destroy ') .tooltip( ' destroy ');}) ; 
$(function () { $(' .tooltip-toggle' ). tooltip( ' toggle ');}) ; 
$(function () { $(" .tooltip-options a" ) .tooltip({html : true }); 
}); 

</script> 

<div> 



This is .1 ' oortip on method show This is a T oo«p on method hide. TNs is 4 


'am Header2 


The is a Ten 


metric 




This Is a 


Events 


Following table lists the events to work with tooltip plugin. This event may be 
used to hook into the function. 


Event 

Description 

Example 

show. bs. tooltip 

This event fires 

immediately when the 
show instance method 

$( ' #myTooltip ' ) . on( ' show. bs .tooltip ' , 
function () { 

// do something... 
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is called. 

}) 

shown. bs. tooltip 

This event is fired 
when the tooltip has 
been made visible to 
the user (will wait for 
CSS transitions to 
complete). 

$( ' #myTooltip ' ) . on( ' shown . bs .tooltip ' , 
function () { 

// do something... 

}) 

hide. bs. tooltip 

This event is fired 
immediately when the 
hide instance method 
has been called. 

$( ' #myTooltip ' ) . on( ' hide . bs .tooltip ' , 
function () { 

// do something... 

}) 

hidden. bs. tooltip 

This event is fired 
when the tooltip has 
finished being hidden 
from the user (will 
wait for CSS 
transitions to 
complete). 

$( ' #myTooltip ' ) . on( ' hidden. bs .tooltip ' , 
function () { 

// do something... 

}) 


Example 

The following example demonstrates the use of tooltip plugin via data attributes. 

<h4>Tooltip examples for anchors</h4> 

This is a <a href="#" class="tooltip-show" data-toggle="tooltip" 
title="Default Tooltip">Default Tooltip 
</a> . 

<script> 

$(function () { $( ' . tooltip-show’ ) . tooltip( ' show ' ) ; }) ; 

$(function () { $(' .tooltip-show’ ) .on( ' show. bs .tooltip ' , function () { 
alert("Alert message on show"); 

})}); 

</script> 
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Tooltip 

This * a Det.-n/ljjixinip . 


>r anchors 


Alert message on show 


OK 
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40. POPOVER PLUGIN 


The popover is similar to tooltip, offering an extended view complete with a 
heading. For the popover to activate, a user just needs to hover the cursor over 
the element. The content of the popover can be populated entirely using the 
Bootstrap Data API. This method requires a tooltip. 

If you want to include this plugin functionality individually, then you will need 
the popover.js and it has a dependency of the tooltip plugin. Else, as mentioned 
in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the 
minified bootstrap. min.js. 

Usage 

The popover plugin generates content and markup on demand, and by default 
places popover after their trigger element. You can add popover in the following 
two ways: 

• Via data attributes: To add a popover, add data-toggle = "popover" to 

an anchor/button tag. The title of the anchor will be the text of a popover. 
By default, popover is set to top by the plugin. 


<a href="#" data-toggle="popover" title="Example popover"> 
Hover over me 
</a> 


• Via JavaScript: Enable popovers via JavaScript using the following 
syntax: 


$( '#identifier ' ) . popover(options) 


Popover plugin is NOT only css plugins like dropdown or other plugins discussed 
in previous chapters. To use this plugin you MUST activate it using jquery (read 
javascript). To enable all the popovers on your page just use this script: 


$(function () { $(" [data-toggle= ' popover popover( ) ; }); 


Example 

The following example demonstrates the use of popover plugin via data 
attributes. 


<div class="container" style="padding: 100px 50px 10px;" > 



200 



Bootstrap 


cbutton type="button" class="btn btn-default" title="Popover title" 
data -container=" body" data-toggle="popoven" dat a - pla cement =" left" 
data-content="Some content in Popoven on left"> 

Popoven on left 
</button> 

<button type="button" class="btn btn-primary" title="Popover title" 
data -container=" body" data -toggle=" popoven" dat a - pla cement =" top" 
data-content="Some content in Popoven on top"> 

Popoven on top 
</button> 

<button type="button" class="btn btn-success" title="Popoven title" 
data-containen="body" data-toggle=" popoven" data -placement^' bottom" 
data-content="Some content in Popoven on bottom"> 

Popoven on bottom 
</button> 

<button type="button" class="btn btn-wanning" title="Popoven title" 
data -containen=" body" data -toggle=" popoven" data- pla cement=" night" 
data-content="Some content in Popoven on night" > 

Popoven on night 
</button> 

</div> 

<scnipt>$(function () 

{ $( " [data-toggle= ' popoven ' ] " ) . popoven ( ) ; 

}); 

</scnipt> 

</div> 


Popover title 

Some content m Popover on left 


Popover t0e 

Some content m Popover on top 


Popover on left 


Popover nn bottom I Popover on rjght 


Popover title 

Son** content in Popover on bottom 


Popover tire 

Some content in Popover on nght 
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Options 


There are certain options which can be added via the Bootstrap Data API or 
invoked via JavaScript. Following table lists the options: 


Option 

Name 

Type/Default 

Value 

Data 

attribute 

name 

Description 

animation 

boolean 

Default: true 

data- 

animation 

Applies a CSS fade transition to the 
popover. 

html 

boolean 

Default: false 

data-html 

Inserts HTML into the popover. If 
false, jQuery's text method will be 
used to insert content into the dom. 
Use text if you're worried about 
XSS attacks. 

placement 

string function 

Default: top 

data- 

placement 

Specifies how to position the 
popover (i.e., 

top | bottom | left | right | auto) . 

When auto is specified, it will 
dynamically reorient the popover. 
For example, if placement is "auto 
left", the popover will display to the 
left when possible, otherwise it will 
display right. 

selector 

string 

Default: false 

data- 

selector 

If a selector is provided, popover 
objects will be delegated to the 
specified targets. 

title 

string | 

function 

Default: " 

data-title 

The title option is the default title 
value if the title attribute isn't 
present. 

trigger 

string 

Default: 'hover 
focus' 

data- 

trigger 

Defines how the popover is 
triggered: click | hover | focus | 
manual. You may pass multiple 
triggers; separate them with a 
space. 
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delay 

number | 

object 

Default: 0 

data-delay 

Delays showing and hiding the 
popover in ms — does not apply to 
manual trigger type. If a number is 
supplied, delay is applied to both 
hide/show. Object structure is: 

delay : 

{ show: 500, hide: 100 } 

container 

string | false 

Default: false 

data- 

container 

Appends the popover to a specific 
element. 

Example: container: 'body' 


Methods 


The following are some useful methods for popover: 


Method 

Description 

Example 

Options: .popover(options) 

Attaches a 
popover handler 
to an element 
collection. 

$() .popoven(options) 

Toggle:, popover('toggle') 

Toggles an 

element's 

popover. 

$( '#element' ) . popover ( ’toggle’ ) 

Show:.popover('show') 

Reveals an 

element's 

popover. 

$( ’ #element ' ) . popover ( ' show’ ) 

Hide:.popover('hide') 

Hides an 

element's 

popover. 

$( ’ #element ' ) . popover ( ’ hide ’ ) 

Destroy:. popover('destroy') 

Hides and 
destroys an 
element's 
popover. 

$( ’ #element ’ ) . popover ( ’ destroy ’ ) 
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Example 

The following example demonstrates the popover plugin methods: 

<div class="container" style="padding: 100px 50px 10px;" > 

<button type="button" class="btn btn-default popover-show" 
title="Popover title" data-container="body" 
data -toggle=" popover" data -placement=" left" 
data-content="Some content in Popover with show method" > 

Popover on left 
</button> 

<button type="button" class="btn btn-primary popover-hide" 
title="Popover title" data-container="body" 
data -toggle=" popover" data -placement= "top" 
data-content="Some content in Popover-hide method"> 

Popover on top 
</button> 

<button type="button" class="btn btn-success popover-destroy" 
title="Popover title" data-container="body" 
data -toggle=" popover" data -placement=" bottom" 
data-content="Some content in Popover-destroy method"> 

Popover on bottom 
</button> 

<button type="button" class="btn btn-warning popover-toggle" 
title="Popover title" data-container="body" 
data -toggle=" popover" data -placement= "top" 
data-content="Some content in Popover-toggle method"> 

Popover on right 

</buttonxbr><br><br><br><brxbr> 

<p class="popover-options"> 

<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" 
data-container="body" data-toggle="popover" data-content=" 
<h4>Some content in Popover-options method</h4>"> 

Popover 

</a> 
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</p> 

<script> 

$(function () { $(’. popover-show '). popover (' show' );}) ; 

$(function () { $( ' . popoven-hide ' ) . popover( ' hide ' ) ; }) ; 

$(function () { $('. popoven-destnoy '). popover( ' destroy ');}) ; 
$(function () { $(’. popoven-toggle' ). popover( ' toggle ');}) ; 
$(function () { $( " . popoven-options a" ) . popover({html : true });}); 
</script> 

</div> 


Popover wle 



Popover title 

Popover title 

Some content in Popover-toggle 

Some content m Popover- hide method 

method 


Some content ri Popover with show 
method 


Popover on left 


Popover on bottom I Popavet on nght 


Title 


Popover 


Some content in Popover- 
options method 


Events 

Following table lists the events to work with the popover plugin. This event may 
be used to hook into the function. 


Event 

Description 

Example 

show. bs. popover 

This event fires 
immediately when 
the show instance 
method is called. 

$( '#my popover' ) .on( ' show. bs . popover ' , 
function () { 

// do something... 

}) 

shown. bs. popover 

This event is fired 
when the popover 
has been made 
visible to the user 
(will wait for CSS 

$( ’#my popover' ) .on( ' shown. bs . popover ' , 
function () { 

// do something... 

}) 
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transitions to 
complete). 


hide. bs. popover 

This event is fired 
immediately when 
the hide instance 
method has been 
called. 

$( '#my popover' ) .on ( 1 hide . bs . popover ' , 
function () { 

// do something... 

}) 

hidden. bs. popover 

This event is fired 
when the popover 
has finished being 
hidden from the 
user (will wait for 

CSS transitions to 
complete). 

$( ’#my popover' ) .on( ' hidden . bs. popover ' , 
function () { 

// do something... 

}) 


Example 

The following example demonstrates the Popover plugin events: 

<div clas="container" style=" padding : 100px 50px 10px;" > 

<button type="button" class="btn btn-primary popover-show" 
title="Popover title" data-container="body" 
data -toggle=" popover" 

data-content="Some content in Popover with show method" > 

Popover on left 
</button> 

</div> 

<script> 

$(function () { $('. popover-show '). popover (' show' );}) ; 

$(function () { $('. popover-show' ). on( ' shown . bs . popover ' , function () { 
alert("Alert message on show"); 

})}); 

</script> 

</div> 
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41. ALERT PLUGIN 


Alert messages are mostly used to display information such as warning or 
confirmation messages to the end users. Using alert message plugin you can add 
dismiss functionality to all alert messages. 

If you want to include this plugin functionality individually, then you will need 
the alert.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you 
can include the bootstrap.js or the minified bootstrap. min.js. 

Usage 

You can enable dismissal of an alert in the following two ways: 

• Via data attributes: To dismiss via Data API just add data- 
dismiss="alert" to your close button to automatically give an alert close 
functionality. 


<a class="close" data-dismiss="alert" href="#" aria- 
hidden="true" > 

Stimes; 

</a> 


• Via JavaScript: To dismiss via JavaScript use the following syntax: 


$(" .alert") .alert() 


Example 

The following example demonstrates the use of alert plugin via data attributes. 

<div class="alert alert-success"> 

<a href="#" class="close" data-dismiss="alert"> 

Stimes; 

</a> 

<strong>Warning ! </strong> There was a problem with your 
network connection. 

</div> 
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Options 

There are no options here. 


Methods 


The following are some useful methods for alert plugin: 


Method 

Description 

Example 

.alert() 

This method wraps all 
alerts with close 
functionality. 

$( '#identifier '). alert () j 

Close 

Method. alert('close') 

To enable all alerts to be 
closed, add this method. 

$( '#identifier '). alert ( ' close ’ ) j 


To enable alerts to animate out when closed, make sure they have 
the .fade and .in class already applied to them. 

Example 

The following example demonstrates the use of .alert() method: 

<h3>Alert messages to demonstrate alert() method </h3> 

<div id="myAlert" class="alert alert-success"> 

<a href="#" class="close" data-dismiss="alert">&times; </a> 
<strong>Success ! </strong> the result is successful. 

</div> 

<div id="myAlert" class="alert alert-warning"> 

<a href="#" class="close" data-dismiss="alert">&times; </a> 
<strong>Warning ! </strong> There was a problem with your 
network connection. 

</div> 
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< sc nipt type=" text/ javascript" > 

$(function(){ 

$(" .close") . click (function(){ 

$( "#myAlent" ) . alert( ) ; 

}); 

}); 

</script> 

Try this code using the Try it editor. 

The following example demonstrates the use of .alert('close') method: 

<h3>Alert messages to demonstrate alert( ' close ' ) method </h3> 

<div id="myAlert" class="alert alert-success"> 

<a href="#" class="close" data-dismiss="alert">&times; </a> 
<strong>Success ! </strong> the result is successful. 

</div> 

<div id="myAlert" class="alert alert-warning"> 

<a href="#" class="close" data-dismiss="alert">&times; </a> 
<strong>Warning ! </strong> There was a problem with your 
network connection. 

</div> 

< script type=" text/ javascript" > 

$(function(){ 

$(" .close") .click(function(){ 

$( "#myAlert" ). alert ( ' close ' ) ; 

}); 

»; 

</script> 

Try this code using the Try it editor. You can see that the close functionality is 
applied to all the alert messages i.e. close any alert message, rest of the alert 
messages also gets closed. 
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Events 

Following table lists the events to work with alert plugin. This event may be used 
to hook into the alert function. 


Event 

Description 

Example 

close. bs. alert 

This event fires 
immediately when 
the close instance method 
is called. 

$( '#my alert 1 ) . bind ( 1 close. bs . alert ' , 
function () { 

// do something... 

}) 

closed. bs. alert 

This event is fired when 
the alert has been closed 
(will wait for CSS 
transitions to complete). 

$( '#my alert ' ) . bind( ' closed . bs. alert ’ j 
function () { 

// do something... 

}) 


Example 

The following example demonstrates the alert plugin events: 

<div id="myAlert" class="alert alert-success"> 

<a href="#" class="close" data-dismiss="alert">&times; </a> 
<strong>Success ! </strong> the result is successful. 

</div> 

< script type=" text/ javascript" > 

$(function(){ 

$( "#myAlert" ). bind( ' closed . bs . alert ' , function () { 
alert("Alert message box is closed."); 

}); 

}); 

</script> 
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42. BUTTON PLUGIN 


Buttons were explained in chapter Bootstrap Buttons. With this plugin you can 
add in some interaction such as control button states or create groups of buttons 
for more components like toolbars. 

If you want to include this plugin functionality individually, then you will need 
the button.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, 
you can include the bootstrap.js or the minified the bootstrap. min.js. 

Loading State 

To add a loading state to a button, simply add the data-loading- 
text="Loading..." as an attribute to the button element as shown in the 
following example: 


cbutton id="fat-btn" class="btn btn-primary" data-loading- 
text="Loading. . . " 

type="button" > Loading state 

</button> 

<script> 

$(function() { 

$(" .btn") . click (function(){ 

$(this) . button ( ' loading ' ) . delay (1000) . queue (function ( ) { 

// $(this) . button( ' reset ') ; 

}); 

}); 

}); 

</script> 

When you click on the button, the output would be as seen in the following 
image: 
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Single Toggle 

To activate toggling (i.e. change the normal state of a button to a push state 
and vice versa) on a single button, add the data-toggle = "button" as an 
attribute to the button element as shown in the following example: 

cbutton type="button" class="btn btn-primary" 
data -toggle=" button" >Single toggle 
</button> 


Single toggle 


Checkbox 

You can create group of checkboxes and add toggling to it by simply adding the 
data attribute data-toggle = "buttons" to the btn-group. 

<div class="btn-group" data-toggle="buttons" > 
clabel class="btn btn-primary" > 

<input type="checkbox" > Option 1 
</label> 

clabel class="btn btn-primary" > 
cinput type="checkbox" > Option 2 
</label> 

clabel class="btn btn-primary" > 
cinput type="checlcbox" > Option 3 
c/label> 
c/div> 


Option 1 Option 2 Option 3 
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Radio 

Similarly you can create a group of radio inputs and add toggling to it by simply 
adding the data attribute data-toggle="buttons" to the btn-group. 

<div class="btn-group" data-toggle="buttons" > 
clabel class="btn btn-primary" > 

<input type="radio" name="options" id="optionl" > Option 1 
</label> 

<label class="btn btn-primary" > 

<input type="radio" name="options" id="option2" > Option 2 
</label> 

<label class="btn btn-primary" > 

<input type="radio" name="options" id="option3" > Option 3 
</label> 

</div> 


Option 1 Option 2 Option 3 


Usage 

You can enable buttons plugin via JavaScript as shown below: 


$(' .btn' ). button () 


Options 

There are no options. 


Methods 


Given below are some of the useful methods for buttons plugin: 


Method 

Description 

Example 

button('toggle') 

Toggles push state. Gives the button the 

$( ) . button ( ' toggle ' ) 
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appearance that it has been activated. You 
can also enable auto toggling of a button by 
using thedata-toggle attribute. 


.button('loading') 

When loading, the button is disabled and 
the text is changed to the option from 
the data-loading-text attribute of button 
element. 

$( ) . button ( ' loading' ) 

.button('reset') 

Resets button state, bringing the original 
content back to the text. This method is 
useful when you need to return the button 
back to the primary state. 

$( ) . button( ' reset ' ) 

.button(string) 

String in this method is referring to any 
string declared by the user. To reset the 
button state and bring in new content use 
this method. 

$( ) . button (string) 


Example 

The following example demonstrates the use of the above methods: 

<h2>Click on each of the buttons to see the effects of methods</h2> 
<h4>Example to demonstrate . button( ' toggle ' ) method</h4> 

<div id="myButtonsl" class="bs-example"> 

cbutton type="button" class="btn btn-primary">Primary</button> 
</div> 

<h4>Example to demonstrate . button( ' loading ' ) method</h4> 

<div id="myButtons2" class="bs-example"> 

<button type="button" class="btn btn-primary" 
data-loading-text="Loading. . . ">Primary 
</button> 

</div> 

<h4>Example to demonstrate . button( ' reset ' ) method</h4> 

<div id="myButtons3" class="bs-example"> 

cbutton type="button" class="btn btn-primary" 
data-loading-text="Loading. . . ">Primary 
</button> 
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</div> 

<h4>Example to demonstrate .button(string) method</h4> 

<button type="button" class="btn btn-primary" id="myButton4" 
data-complete-text="Loading finished">Click Me 
</button> 

< script type= " text/ java script "> 

$(function () { 

$( "#my Buttons 1 . btn") . click(function(){ 

$(this) . button ( ' toggle ' ) ; 

}); 

}); 

$(function() { 

$("#myButtons2 .btn") . click(function(){ 

$(this) . button ( ' loading ' ) . delay (1000) . queue (funct ion ( ) { 

}); 

}); 

}); 

$(function() { 

$( "#my Buttons 3 . btn") . click (funct ion( ){ 

$(this) . button ( ' loading ' ) . delay (1000) . queue (funct ion ( ) { 
$(this) . button ( ' reset ' ) ; 

}); 

}); 

}); 

$(function() { 

$( "#myButton4" ) . click (function ( ) { 

$(this) . button ( ' loading ' ) . delay (1000) . queue (funct ion ( ) { 
$(this) . button ( ' complete ' ) ; 

}); 

}); 

}); 

</script> 
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Click on each of the buttons to see the effects of methods 

Example to demonstrate .button(’toggle') method 


Primary 


Example to demonstrate button(loading') method 



Example to demonstrate button('resef) method 


Primary 


Example to demonstrate button(string) method 


Click Me 
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The collapse plugin makes it easy to make collapsing divisions of the page. 
Whether you use it to build an accordion navigation or content boxes, it allows 
for a lot of content options. 

If you want to include this plugin functionality individually, then you will need 
the collapse.js. This also requires the Transition Plugin to be included in your 
version of Bootstrap. Else, as mentioned in the chapter Bootstrap Plugins 
Overview, you can include the bootstrap.js or the minified bootstrap. min.js. 

You can use the collapse plugin: 

• To create collapsible groups or accordion. This can be created as in 
the sample example below: 


<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 


<div class="panel-heading"> 

<h4 class="panel-title"> 

<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne"> 

Click me to exapand. Click me again to collapse. Section 1 
</a> 

</h4> 

</div> 

<div id="collapseOne" class="panel-collapse collapse in"> 
<div class="panel-body"> 

Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 

</div> 

</div> 

</div> 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 
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<a data-toggle="collapse" data-panent="#accondion" 
hnef="#collapseTwo"> 

Click me to exapand. Click me again to collapse. Section 2 
</a> 

</h4> 

</div> 

<div id="collapseTwo" class="panel-collapse collapse"> 

<div class="panel-body"> 

Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 

</div> 

</div> 

</div> 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 

<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree" > 

Click me to exapand. Click me again to collapse. Section 3 
</a> 

</h4> 

</div> 

<div id="collapseThree" class="panel-collapse collapse"> 

<div class="panel-body"> 

Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 

</div> 

</div> 

</div> 

</div> 

data-toggle="collapse" is added to the link on which you click to 
expand or collapse the component. 


tutorialspoint 
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• href or a data-target attribute is added to the parent component, whose 
value is id of the child component. 

• data-parent attribute is added for creating the accordion like effect. 


Click ms to exapand Click ms again to collapso Sscbon 1 

Click me to exaoand Click me again to collapse .Section 2 

NSW awn kaffiysb hstvebca. craft beer labors was anderson cred nescunt saewite ea 
prodent Ad vegan excepieut butcher vice tomo 

Click me to exapartd Click me again to collapse Section 3 


e To create simple collapsible without the accordion markup: This can be 
created as in the sample example below: 

<button type="button" class="btn btn-primary" data-toggle="collapse" 
data-target="#demo" > 
simple collapsible 
</button> 

<div id="demo" class="collapse in"> 

Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 

</div> 


As you can see in the example we have created a simple collapsible component, 
unlike accordion, we haven't added the attribute data-parent. 



Usage 

Following table lists the classes that the collapse plugin utilizes to handle the 
heavy lifting: 
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Class 

Description 

.collapse 

Hides the content. 

.collapse. in 

Shows the content. 

.collapsing 

Is added when the transition starts, and removed when it 
finishes. 


You can use collapse plugin in two ways: 

• Via data attributes: Add data-toggle="collapse" and a data-target to 

the element to automatically assign control of a collapsible element. 
The data-target attribute will accept a CSS selector to apply the collapse 
to. Be sure to add the class .collapse to the collapsible element. If you'd 
like it to default open, include the additional class .in. 

To add accordion-like group management to a collapsible control, add the 
data attribute data-parent="#selector". 

• Via JavaScript: The collapse method can be activated with JavaScript as 
shown below: 


$(' .collapse 1 ) . collapse ( ) 


Options 


There are certain options which can be passed via data attributes or JavaScript 
are listed in the following table: 


Option 

Name 

Type/Default 

Value 

Data 

attribute 

name 

Description 

parent 

selector 

Default: false 

data- 

parent 

If selector is false, then all collapsible 
elements under the specified parent 
will be closed (similar to traditional 
accordion behavior - this dependent 
on the accordion-group class). 

toggle 

boolean 

data- 

toggle 

Toggles the collapsible element on 
invocation. 
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Default: true 




Methods 


Here is a list of some useful methods that are used with collapsible elements. 


Method 

Description 

Example 

Options:. collapse(options) 

Activates your 
content as a 
collapsible 
element. 

Accepts an 
optional options 
object. 

$( ' #identif ien ' ) .collapse({ 

toggle: false 

}) 

Toggle:, collapse('toggle') 

Toggles a 
collapsible 
element to 
shown or 
hidden. 

$( ’ #identif ien ' ) .collapse( ’toggle' ) 

Show:.collapse('show') 

Shows a 

collapsible 

element. 

$( ’ #identif ien ' ) .collapse( ' show’ ) 

Hide:.collapse('hide') 

Hides a 

collapsible 

element. 

$( ’ #identif ien ' ) .collapse( ' hide’ ) 


Example 

The following example demonstrates the usage of methods: 

<div class="panel-group" id="accordion"> 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 

<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne"> 
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Click me to exapand. Click me again to collapse. 

Section l--hide method 
</a> 

</h4> 

</div> 

<div id="collapseOne" class="panel-collapse collapse in"> 

<div class="panel-body"> 

Nihil anim keffiyeh helveticaj craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 

</div> 

</div> 

</div> 

<div class="panel panel-success"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 

<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo"> 

Click me to exapand. Click me again to collapse. 

Section 2--show method 
</a> 

</h4> 

</div> 

<div id="collapseTwo" class="panel-collapse collapse"> 

<div class="panel-body"> 

Nihil anim keffiyeh helveticaj craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 

</div> 

</div> 

</div> 

<div class="panel panel-info"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 
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<a data-toggle="collapse" data-parent="#accondion" 
href="#collapseThree"> 

Click me to exapand. Click me again to collapse. 

Section 3- -toggle method 
</a> 

</h4> 

</div> 

<div id="collapseThree" class="panel-collapse collapse"> 

<div class="panel-body"> 

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 

</div> 

</div> 

</div> 

<div class="panel panel-warning"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 

<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseFour"> 

Click me to exapand. Click me again to collapse. 

Section 4--options method 
</a> 

</h4> 

</div> 

<div id="collapseFour" class="panel-collapse collapse"> 

<div class="panel-body"> 

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 

</div> 

</div> 

</div> 

</div> 
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< sc nipt type="text/ java sc nipt" > 

$(function () { $( ’#collapseFoun' ) .collapse({ 
toggle: false 
})}); 

$(function () { $( '#collapseTwo ' ) . collapse( ' show ' ) }) ; 
$(function () { $( ’#collapseThnee '). collapse( ' toggle ')}) ; 
$(function () { $( ’#collapseOne ' ) . collapse( ' hide ' ) }) ; 
</scnipt> 


Click me to exapand. Click me again to collapse Section l--hide method 

Click me to exapand. Click me again to collapse.Section 2--show method 

Nihil anlm keffiyeh hetvetica. cratt beer labore vwes anderson cred nesciunt sapienie ea 
proidenl. Ad vegan excepteur butcher vice lomo 

Click me to exapand. Click me again to collapse.Section 3— toggle method 

Nihil anim keffiyeh Helvetica, craft beer labore wes anderson cred nesciunt sapienie ea 
proident Ad vegan excepteur butcher vice lomo. 


Events 


The following table lists a few events that can be used with the collapse 
functionality. 


Event 

Description 

Example 

show. bs. collapse 

Fired after the 
show method is 
called. 

$('#identifier').on('show.bs. collapse', 
function () { 

// do something... 

}) 

shown. bs. collapse 

This event is 
fired when a 
collapse element 
has been made 
visible to the 
user (will wait 

$('#identifier').on('shown.bs. col lapse', 
function () { 

// do something... 

}) 
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for CSS 
transitions to 
complete). 


hide. bs. collapse 

Fired when the 
hide instance 
method has been 
called. 

$('# identifier'). on('hide.bs.collapse', 
function () { 

// do something... 

}) 

hidden. bs. collapse 

This event is 
fired when a 
collapse element 
has been hidden 
from the user 
(will wait for CSS 
transitions to 
complete). 

$('# identifier'). on('hidden.bs. col lapse', 
function () { 

// do something... 

}) 


Example 

The following example demonstrates the usage of events: 

<div class="panel-group" id="accordion" > 

<div class="panel panel-info"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 

<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseexample" > 

Click me to exapand. Click me again to collapse. 

Section --shown event 
</a> 

</h4> 

</div> 

<div id="collapseexample" class="panel-collapse collapse"> 

<div class="panel-body"> 

Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. 

Ad vegan excepteur butcher vice lomo. 
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</div> 

</div> 

</div> 

</div> 

< sc nipt type=" text/ javascript" > 

$(function () { 

$( '#collapseexample '). on( ' show. bs . collapse ' j function () { 
alert('Hey, this alert shows up when you expand it');}) 

}); 

</script> 
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44. CAROUSEL PLUGIN 


The Bootstrap carousel is a flexible, responsive way to add a slider to your site. 
In addition to being responsive, the content is flexible enough to allow images, 
iframes, videos, or just about any type of content that you might want. 

If you want to include this plugin functionality individually, then you will need 
the carousel.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, 
you can include the bootstrap, js or the minified bootstrap. min.js. 


Example 


A simple slideshow below shows a generic component for cycling through the 
elements like a carousel, using the Bootstrap carousel plugin. To implement the 
carousel, you just need to add the code with the markup. There is no need for 
data attributes, just simple class-based development. 

<div id="myCarousel" class="carousel slide"> 

<!-- Carousel indicators --> 
col c las s=" carousel -indicators" > 

<li data-target="#myCarousel" data-slide-to="0" class="active"x/li> 
<li data-target="#myCarousel" data-slide-to="l" ></li> 

<li data-target="#myCarousel" data-slide-to="2" ></li> 

</ ol> 

<!-- Carousel items --> 
cdiv class="carousel-inner"> 
cdiv class="item active"> 

cimg src="/bootstrap/images/slidel . png" alt="First slide"> 

</div> 

cdiv class="item"> 

cimg src="/bootstrap/images/slide2 . png" alt="Second slide"> 
c/div> 

cdiv class="item"> 

cimg src="/bootstrap/images/slide3 . png" alt="Third slide"> 
c/div> 
c/div> 

c!-- Carousel nav --> 
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<a class="carousel-control left" href="#myCarousel" 
data-slide="prev" >&lsaquo; </a> 

<a class="canousel-contnol right" href="#myCarousel" 
data -slide=" next" >&rsaquo; </a> 

</div> 



Optional Captions 

You can add captions to your slides easily with the .carousel-caption element 
within any .item. Place just about any optional HTML within there and it will be 
automatically aligned and formatted. The following example demonstrates this: 

<div id="myCarousel" class="carousel slide"> 

<!-- Carousel indicators --> 
col c las s=" carousel -indicators" > 

<li data-target="#myCarousel" data-slide-to="0" class="active"x/li> 

<li data-target="#myCarousel" data-slide-to="l" ></li> 

<li data-target="#myCarousel" data-slide-to="2" ></li> 

</ol> 

<!-- Carousel items --> 
cdiv class="carousel-inner"> 
cdiv class="item active"> 

cimg src="/bootstrap/images/slidel . png" alt="First slide"> 
cdiv class="carousel-caption" >This Caption lc/div> 
c/div> 
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<div class="item"> 

<img snc="/bootstnap/images/slide2 . png" alt="Second slide"> 
<div class="carousel-caption" >This Caption 2</div> 

</div> 

<div class="item"> 

<img snc="/bootstrap/images/slide3 . png" alt="Third slide"> 
<div class="canousel-caption" >This Caption 3</div> 

</div> 

</div> 

<!-- Carousel nav --> 

<a class="carousel-control left" href="#myCarousel" 
data-slide="prev" >&lsaquo; </a> 

<a class="carousel-control right" href="#myCarousel" 
data -slide=" next" >&rsaquo; </a> 

</div> 



Usage 

• Via data attributes: Use data attributes to easily control the position of 
the carousel. 

o Attribute data-slide accepts the keywords prev or next, which alters 
the slide position relative to its current position. 

o Use data-slide-to to pass a raw slide index to the carousel data- 
slide-to="2", which shifts the slide position to a particular index 
beginning with 0. 
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o The data-ride="carousel" attribute is used to mark a carousel as an 
animation starting at page load. 

• Via JavaScript: The carousel can be manually called with JavaScript as 
below: 


$('. carousel') . carousel () 


Options 


There are certain options, which can be passed via data attributes or JavaScript 
are listed in the following table: 


Option 

Name 

Type/Default 

Value 

Data 

attribute 

name 

Description 

interval 

number 

Default: 5000 

data- 

interval 

The amount of time to delay 
between automatically cycling an 
item. If false, carousel will not 
automatically cycle. 

pause 

string 

Default: "hover" 

data-pause 

Pauses the cycling of the carousel 
on mouseenter and resumes the 
cycling of the carousel on 
mouseleave. 

wrap 

boolean 

Default: true 

data-wrap 

Whether the carousel should cycle 
continuously or have hard stops. 


Methods 


Here is a list of useful methods that can be used with carousel code. 


Method 

Description 

Example 

.carousel(options) 

Initializes the carousel 
with an optional options 
object and starts cycling 
through items. 

$( ' #identif ier ' ) .canousel({ 

interval: 2000 

}) 
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.carousel('cycle') 

Cycles through the 

carousel items from left 
to right. 

$( ' #identif ier ' ) . carousel ( ' cycle ’ ) 

.carousel('pause') 

Stops the carousel from 
cycling through items. 

$( ’ #identif ier ' ) . .carousel( 'pause' ) 

.carousel(number) 

Cycles the carousel to a 
particular frame (0 
based, similar to an 
array). 

$( ’ #identif ier ' ) .carousel(number) 

.carousel('prev') 

Cycles to the previous 
item. 

$( ’ #identif ier ' ) . carousel ( ' prev’ ) 

.carousel('next') 

Cycles to the next item. 

$( ’ #identif ier ' ) .carousel( ' next' ) 


Example 

The following example demonstrates the usage of methods: 

<div id="myCarousel" class="carousel slide"> 

<!-- Carousel indicators --> 
col class=" carousel -indicators'^ 

<li data-target="#myCarousel" data-slide-to="0" 
class="active"x/li> 

<li data-target="#myCarousel" data-slide-to="l" ></li> 

<li data-target="#myCarousel" data-slide-to="2"x/li> 

</ ol> 

<!-- Carousel items --> 
cdiv class="carousel-inner"> 
cdiv class="item active"> 

cimg src="/bootstrap/images/slidel . png" alt="First slide"> 
</div> 

cdiv class="item" > 

cimg src="/bootstrap/images/slide2. png" alt="Second slide"> 
c/div> 

cdiv class="item"> 
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<img src="/bootstrap/images/slide3 . png" alt="Third slide"> 
</div> 

</div> 

<!-- Carousel nav --> 

<a class="carousel-control left" href="#myCarousel" 
data -slide="prev">&lsa quo; </a> 

<a class="carousel-control right" href="#myCarousel" 
data - slide=" next ">&rsa quo; </a> 

<!-- Controls buttons --> 

<div style="text-align : center; "> 

<input type="button" class="btn start-slide" value="Start"> 
<input type="button" class="btn pause-slide" value="Pause"> 
<input type="button" class="btn prev-slide" value="Previous Slide"> 
<input type="button" class="btn next-slide" value="Next Slide"> 
<input type="button" class="btn slide-one" value="Slide 1"> 
<input type="button" class="btn slide-two" value="Slide 2"> 
<input type="button" class="btn slide-three" value="Slide 3"> 
</div> 

</div> 

<script> 

$(function(){ 

// Initializes the carousel 

$(" . start -slide " ) . click (function(){ 

$( "#myCarousel" ) . carousel ( 'cycle ') ; 

}); 

// Stops the carousel 

$(" . pause -slide " ) . click (function(){ 

$( "#myCarousel" ) . carousel ( 'pause ') ; 

}); 

// Cycles to the previous item 
$(" .prev-slide") . click (function( ){ 

$( "#myCarousel" ) . carousel ( ' prev' ) ; 

}); 
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// Cycles to the next item 

$(" . next -slide" ) . click (function( ){ 

$( "#myCarousel" ) . carousel ( ' next ' ) ; 

}); 

// Cycles the carousel to a particular frame 

$(" . slide -one" ) . click(function( ) { 

$( "#myCarousel" ) . carousel (0) ; 

}); 

$( " . slide -two" ) . click(function( ) { 

$( "#myCarousel" ) . carousel (1) ; 

}); 

$(" . slide -three " ) . click (function(){ 

$( "#myCarousel" ) . carousel (2) ; 

}); 

}); 

</script> 



Start Pause Previous Slide Next Slide Slide 1 Side 2 Slide 3 


Events 

Bootstrap's carousel class exposes two events for hooking into carousel 
functionality which are listed in the following table. 
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Event 

Description 

Example 

slide. bs. carousel 

This event fires 
immediately when 
the slide instance 
method is invoked. 

$( '#identifier ' ) . on( ' slide . bs. carousel ' , 
function () { 

// do something... 

}) 

slid. bs. carousel 

This event is fired 
when the carousel 
has completed its 
slide transition. 

$( ’#identifier ' ) . on( ' slid. bs .carousel ’ , 
function () { 

// do something... 

}) 


Example 

The following example demonstrates the usage of events: 

<div id="myCarousel" class="carousel slide"> 

<!-- Carousel indicators --> 

<ol c las s=" carousel -indicators" > 

<li data-target="#myCarousel" data-slide-to="0" 
class=" active" ></li> 

<li data-target="#myCarousel" data-slide-to="l" ></li> 

<li data-target="#myCarousel" data-slide-to="2" ></li> 

</ol> 

<!-- Carousel items --> 

<div class="carousel-inner"> 

<div class="item active"> 

<img src="/bootstrap/images/slidel . png" alt="First slide"> 
</div> 

<div class="item"> 

<img src="/bootstrap/images/slide2 . png" alt="Second slide"> 
</div> 

<div class="item"> 

<img src="/bootstrap/images/slide3 . png" alt="Third slide"> 
</div> 

</div> 
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<!-- Carousel nav --> 

<a class="carousel-control left" href="#myCarousel" 
data-slide="prev" >&lsaquo; </a> 

<a class="carousel-control right" href="#myCarousel" 
data -slide=" next" >&rsaquo; </a> 

</div> 

<script> 

$(function(){ 

$( '#myCarousel '). on( ' slide. bs . carousel ' , function () { 

alert("This event fires immediately when the slide instance 

method" 

+"is invoked."); 

}); 

}); 

</script> 
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The affix plugin allows a <div> to become affixed to a location on the page. You 
can also toggle it's pinning on and off using this plugin. A common example of 
this are social icons. They will start in a location, but as the page hits a certain 
mark, the <div> will be locked in place and will stop scrolling with the rest of the 
page. 

If you want to include this plugin functionality individually, then you will need 
the affix.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you 
can include the bootstrap.js or the minified bootstrap. min.js. 

Usage 

You can use the affix plugin via data attributes or manually with your own 
JavaScript as discussed below. 

• Via data attributes: To easily add affix behavior to any element, just 
add data-spy= "affix" to the element you want to spy on. Use offsets to 
define when to toggle the pinning of an element. 

Example 

The following example demonstrates the usage through data attributes: 

<div class="container"> 

<div class=" jumbotron"> 

<hl>Bootstrap Affix Plugin example</hl> 

</div> 

<div id="myNav" data-spy="affix" data-offset-top="60" 
data- offset -bottom=" 200" > 

<div class="col-md-3"> 

<ul class="nav nav-tabs nav-stacked affix" data-spy="affix" 
data -off set-top="190"> 

<li class = "active"xa href="#one">Tutorial One</ax/li> 
clixa href="#two">Tutorial Two</ax/li> 
clixa href="#three">Tutorial Three</ax/li> 

</ul> 

</div> 
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<div class="col-md-9"> 

<h2 id="one" >Tutorial 0ne</h2> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
metus, dapibus nec turpis vel, semper malesuada ante. 
Vestibulum id metus ac nisi bibendum scelerisque non non 
purus. Suspendisse varius nibh non aliquet sagittis. In 
tincidunt orci sit amet elementum vestibulum. Vivamus 
fermentum in arcu in aliquam. Quisque aliquam porta odio 
in fringilla. Vivamus nisi leo, blandit at bibendum eu, 
tristique eget risus. Integer aliquet quam ut elit suscipit, 
id interdum neque porttitor. Integer 
faucibus ligula.</p> 

<p>Vestibulum quis quam ut magna consequat faucibus. 
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus 
dictum risus. Pellentesque viverra sagittis quam at mattis. 
Suspendisse potenti. Aliquam sit amet gravida nibh, 
facilisis gravida odio. Phasellus auctor velit at lacus 
blandit, commodo iaculis justo viverra. Etiam vitae est 
arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusee 
quam tortor, commodo ac dui quis, bibendum viverra erat. 
Maecenas mattis lectus enim, quis tincidunt dui molestie 
euismod. Curabitur et diam tristique, accumsan nunc eu, 
hendrerit tellus.</p> 

<hr> 

<h2 id="two" >Tutorial Two</h2> 

<p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam 
in sagittis lectus. Suspendisse ultrices placerat accumsan. 
Mauris quis dapibus orci. In dapibus velit blandit pharetra 
tincidunt. Quisque non sapien nec lacus condimentum facilisis 
ut iaculis enim. Sed viverra interdum bibendum. Donee ac 
sollicitudin dolor. Sed fringilla vitae lacus at rutrum. 
Phasellus congue vestibulum ligula sed consequat . </p> 
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<p>Vestibulum consectetur scelenisque lacus, ac fermentum 
lonem convallis sed. Nam odio tortor, dictum quis malesuada at, 
pellentesque vitae onci. Vivamus elementum, felis eu auctor 
lobortis, diam velit egestas lacus, quis fermentum metus ante 
quis urna. Sed at facilisis libero. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, 
molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem 
augue, hendrerit non sapien in, mollis ornare augue.</p> 

<hr> 

<h2 id="three">Tutorial Three</h2> 

<p>Integer pulvinar leo id risus pellentesque vestibulum. 

Sed diam libero, sodales eget sapien vel, porttitor bibendum 
enim. Donee sed nibh vitae lorem porttitor blandit in nec ante. 
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem 
malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien 
diam. Donee pharetra id arcu eget blandit. Proin imperdiet 
mattis augue in porttitor. Quisque tempus enim id lobortis 
feugiat. Suspendisse tincidunt risus quis dolor fringilla 
blandit. Ut sed sapien at purus lacinia porttitor. Nullam 
iaculis, felis a pretium ornare, dolor nisi semper tortor, vel 
sagittis lacus est consequat eros. Sed id pretium nisi. 
Curabitur dolor nisi, laoreet vitae aliquam id, tincidunt sit 
amet mauris. </p> 

<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat 
ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis 
luctus turpis at accumsan tincidunt. Phasellus risus risus, 
volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
hendrerit dolor eget ante rutrum adipiscing. Cras interdum 
ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor 
ut enim lobortis pellentesque ultricies ac ligula. Pellentesque 
convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras 
ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer 
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pellentesque neque et elementum tempus. Curabitur bibendum in 
ligula ut rhoncus.</p> 

<p>Quisque phanetra velit id velit iaculis pnetium. Nullam a 
justo sed ligula porta semper eu quis enim. Pellentesque 
pellentesque, metus at facilisis hendrerit, lectus velit 
facilisis leo, quis volutpat turpis arcu quis enim. Nulla 
viverra lorem elementum interdum ultricies. Suspendisse 
accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, 
eget convallis tellus. Suspendisse potenti.</p> 

</div> 

</div> 

</div> 


Bootstrap Affix Plugin example 

Tutorial One 
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• Via JavaScript: You can affix an element manually with JavaScript as 
shown below: 

$ ( ' #myAf f ix '). affix ( { 
offset: { 

top: 100, bottom: function () { 
return (this. bottom = 

$( ' . bs -footer ' ) .outerHeight(true) ) 

} 

} 
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}) 

Example 

The following example demonstrates the usage through data attributes: 

<div class="container"> 

<div class=" jumbotron" > 

<hl>Bootstrap Affix Plugin example</hl> 

</div> 

<div> 

<div class="col-md-3"> 

<ul class="nav nav-tabs nav-stacked affix" id="myNav"> 

<li class = "active" ><a href="#one">Tutorial One</ax/li> 
<lixa href="#two">Tutorial Two</ax/li> 

<lixa href="#three">Tutorial Three</ax/li> 

</ul> 

</div> 

<div class="col-md-9"> 

<h2 id="one">Tutorial 0ne</h2> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
metus, dapibus nec turpis vel, semper malesuada ante. 
Vestibulum id metus ac nisi bibendum scelerisque non non 
purus. Suspendisse varius nibh non aliquet sagittis. In 
tincidunt orci sit amet elementum vestibulum. Vivamus 
fermentum in arcu in aliquam. Quisque aliquam porta odio 
in fringilla. Vivamus nisi leo, blandit at bibendum eu, 
tristique eget risus. Integer aliquet quam ut elit suscipit, 
id interdum neque porttitor. Integer 
faucibus ligula.</p> 

<p>Vestibulum quis quam ut magna consequat faucibus. 
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus 
dictum risus. Pellentesque viverra sagittis quam at mattis. 
Suspendisse potenti. Aliquam sit amet gravida nibh. 
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facilisis gravida odio. Phasellus auctor velit at lacus 
blandit, commodo iaculis justo viverra. Etiam vitae est 
arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusee 
quam tortor, commodo ac dui quis, bibendum viverra erat. 
Maecenas mattis lectus enim, quis tincidunt dui molestie 
euismod. Curabitur et diam tristique, accumsan nunc eu, 
hendrerit tellus.</p> 

<hr> 

<h2 id="two">Tutorial Two</h2> 

<p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam 
in sagittis lectus. Suspendisse ultrices placerat accumsan. 
Mauris quis dapibus orci. In dapibus velit blandit pharetra 
tincidunt. Quisque non sapien nec lacus condimentum facilisis 
ut iaculis enim. Sed viverra interdum bibendum. Donee ac 
sollicitudin dolor. Sed fringilla vitae lacus at rutrum. 
Phasellus congue vestibulum ligula sed consequat . </p> 
<p>Vestibulum consectetur scelerisque lacus, ac fermentum 
lorem convallis sed. Nam odio tortor, dictum quis malesuada at, 
pellentesque vitae orci. Vivamus elementum, felis eu auctor 
lobortis, diam velit egestas lacus, quis fermentum metus ante 
quis urna. Sed at facilisis libero. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, 
molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem 
augue, hendrerit non sapien in, mollis ornare augue.</p> 

<hr> 

<h2 id="three" >Tutorial Three</h2> 

<p>Integer pulvinar leo id risus pellentesque vestibulum. 

Sed diam libero, sodales eget sapien vel, porttitor bibendum 
enim. Donee sed nibh vitae lorem porttitor blandit in nec ante. 
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem 
malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien 
diam. Donee pharetra id arcu eget blandit. Proin imperdiet 
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mattis augue in porttitor. Quisque tempus enim id lobortis 
feugiat. Suspendisse tincidunt risus quis dolor fringilla 
blandit. Ut sed sapien at purus lacinia porttitor. Nullam 
iaculis, felis a pretium ornare, dolor nisi semper tortor, vel 
sagittis lacus est consequat eros. Sed id pretium nisi. 
Curabitur dolor nisi, laoreet vitae aliquam id, tincidunt sit 
amet mauris. </p> 

<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat 
ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis 
luctus turpis at accumsan tincidunt. Phasellus risus risus, 
volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
hendrerit dolor eget ante rutrum adipiscing. Cras interdum 
ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor 
ut enim lobortis pellentesque ultricies ac ligula. Pellentesque 
convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras 
ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer 
pellentesque neque et elementum tempus. Curabitur bibendum in 
ligula ut rhoncus.</p> 

<p>Quisque pharetra velit id velit iaculis pretium. Nullam a 
justo sed ligula porta semper eu quis enim. Pellentesque 
pellentesque, metus at facilisis hendrerit, lectus velit 
facilisis leo, quis volutpat turpis arcu quis enim. Nulla 
viverra lorem elementum interdum ultricies. Suspendisse 
accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, 
eget convallis tellus. Suspendisse potenti. </p> 

</div> 

</div> 

</div> 

< script type=" text/ javascript" > 

$(function () { 

$ ( ' #myNav ' ) . affix ( { 
offset: { 
top: 60 
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Bootstrap Affix Plugin example 


Tutorial One 
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Tutorial Two 
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Positioning via CSS 

In both the above situations, you must provide CSS for the positioning of your 
content. The affix plugin toggles between three classes, each representing a 
particular state: .affix, .affix-top, and .affix-bottom. Follow the below steps to 
set your CSS for either of the above usage options. 

• To start, the plugin adds .affix-top to indicate the element is in its top- 
most position. At this point no CSS positioning is required. 

• Scrolling past the element you want affixed should trigger the actual 
affixing. This is where .affix replaces .affix-top and sets position: 
fixed; (provided by Bootstrap's code CSS). 

• If a bottom offset is defined, scrolling past that should 
replace .affix with .affix-bottom. Since offsets are optional, setting one 
requires you to set the appropriate CSS. In this case, add position: 
absolute; when necessary. 
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Options 


There are certain options which can be passed via data attributes or JavaScript 
as listed in the following table: 


Option 

Type/Default 

Data 

Description 

Name 

Value 

attribute 




name 


offset 

number | 

data-offset 

Pixels to offset from screen when 


function | 


calculating position of scroll. If a 


object 


single number is provided, the offset 


Default: 10 


will be applied in both the top and 
bottom directions. To provide a 
unique, bottom and top offset just 
provide an object offset: { top: 10 } 
or offset: { top: 10, bottom: 5 }. Use 
a function when you need to 
dynamically calculate an offset. 
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